<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Properties and Values API Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="ED" name="w3c-status">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/css-properties-values-api-1/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Properties and Values API Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.css-houdini.org/css-properties-values-api-1/">https://drafts.css-houdini.org/css-properties-values-api-1/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/css-properties-values-api-1/">https://www.w3.org/TR/css-properties-values-api-1/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2017/WD-css-properties-values-api-1-20171109/" rel="prev">https://www.w3.org/TR/2017/WD-css-properties-values-api-1-20171109/</a>
     <dd><a href="http://www.w3.org/TR/2016/WD-css-properties-values-api-1-20160607/" rel="prev">http://www.w3.org/TR/2016/WD-css-properties-values-api-1-20160607/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-houdini@w3.org?subject=%5Bcss-properties-values-api%5D%20YOUR%20TOPIC%20HERE">public-houdini@w3.org</a> with subject line “<kbd>[css-properties-values-api] <i data-lt>… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/public-houdini/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (<span class="p-org org">Google</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="13329"><a class="p-name fn u-email email" href="mailto:daniel.glazman@disruptive-innovations.com">Daniel Glazman</a>
     <dd class="editor p-author h-card vcard" data-editor-id="46659"><a class="p-name fn u-email email" href="mailto:stearns@adobe.com">Alan Stearns</a>
     <dd class="editor p-author h-card vcard" data-editor-id="69511"><a class="p-name fn u-email email" href="mailto:gwhit@microsoft.com">Greg Whitworth</a>
     <dt class="editor">Former Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="47691"><a class="p-name fn u-email email" href="mailto:shanestephens@google.com">Shane Stephens</a>
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:esprehn@chromium.org">Elliot Sprehn</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/css-houdini-drafts/labels/css-properties-values-api-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This CSS module defines an API for registering new CSS properties. Properties registered using this API are provided with a parse syntax that defines a type, inheritance behaviour, and an initial value.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/css-houdini-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-properties-values-api” in the title,
	preferably like this:
	“[css-properties-values-api] <i>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-houdini-archive/">archived</a>. </p>
   <p> This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="http://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#behavior-of-custom-properties"><span class="secno">2</span> <span class="content">Registered Custom Properties</span></a>
     <ol class="toc">
      <li><a href="#determining-registration"><span class="secno">2.1</span> <span class="content">Determining the Registration</span></a>
      <li><a href="#parsing-custom-properties"><span class="secno">2.2</span> <span class="content">Parse-Time Behavior</span></a>
      <li><a href="#specified-value"><span class="secno">2.3</span> <span class="content"><span>Specified Value</span>-Time Behavior</span></a>
      <li><a href="#calculation-of-computed-values"><span class="secno">2.4</span> <span class="content"><span>Computed Value</span>-Time Behavior</span></a>
      <li><a href="#animation-behavior-of-custom-properties"><span class="secno">2.5</span> <span class="content">Animation Behavior</span></a>
      <li><a href="#conditional-rules"><span class="secno">2.6</span> <span class="content">Conditional Rules</span></a>
      <li>
       <a href="#substitution"><span class="secno">2.7</span> <span class="content">Substitution via <span class="css">var()</span></span></a>
       <ol class="toc">
        <li><a href="#fallbacks-in-var-references"><span class="secno">2.7.1</span> <span class="content">Fallbacks In <span class="css">var()</span> References</span></a>
        <li><a href="#dependency-cycles"><span class="secno">2.7.2</span> <span class="content">Dependency Cycles via Relative Units</span></a>
       </ol>
     </ol>
    <li>
     <a href="#at-property-rule"><span class="secno">3</span> <span class="content">The <span>@property</span> Rule</span></a>
     <ol class="toc">
      <li><a href="#the-syntax-descriptor"><span class="secno">3.1</span> <span class="content">The <span class="property">syntax</span> Descriptor</span></a>
      <li><a href="#inherits-descriptor"><span class="secno">3.2</span> <span class="content">The <span class="property">inherits</span> Descriptor</span></a>
      <li><a href="#initial-value-descriptor"><span class="secno">3.3</span> <span class="content">The <span class="property">initial-value</span> Descriptor</span></a>
     </ol>
    <li>
     <a href="#registering-custom-properties"><span class="secno">4</span> <span class="content">Registering Custom Properties in JS</span></a>
     <ol class="toc">
      <li><a href="#the-registerproperty-function"><span class="secno">4.1</span> <span class="content">The <code class="idl"><span>registerProperty()</span></code> Function</span></a>
      <li><a href="#the-propertydefinition-dictionary"><span class="secno">4.2</span> <span class="content">The <code class="idl"><span>PropertyDefinition</span></code> Dictionary</span></a>
     </ol>
    <li>
     <a href="#syntax-strings"><span class="secno">5</span> <span class="content">Syntax Strings</span></a>
     <ol class="toc">
      <li><a href="#supported-names"><span class="secno">5.1</span> <span class="content">Supported Names</span></a>
      <li><a href="#multipliers"><span class="secno">5.2</span> <span class="content">The '+' and '#' Multipliers</span></a>
      <li><a href="#combinator"><span class="secno">5.3</span> <span class="content">The '|' Combinator</span></a>
      <li>
       <a href="#parsing-syntax"><span class="secno">5.4</span> <span class="content">Parsing The Syntax String</span></a>
       <ol class="toc">
        <li><a href="#parsing-definitions"><span class="secno">5.4.1</span> <span class="content">Definitions</span></a>
        <li><a href="#consume-syntax-definition"><span class="secno">5.4.2</span> <span class="content">Consume a Syntax Definition</span></a>
        <li><a href="#consume-syntax-component"><span class="secno">5.4.3</span> <span class="content">Consume a Syntax Component</span></a>
        <li><a href="#consume-data-type-name"><span class="secno">5.4.4</span> <span class="content">Consume a Data Type Name</span></a>
       </ol>
     </ol>
    <li>
     <a href="#cssom"><span class="secno">6</span> <span class="content">CSSOM</span></a>
     <ol class="toc">
      <li><a href="#extensions-to-css-rule-interface"><span class="secno">6.1</span> <span class="content">Extensions to the <code class="idl"><span>CSSRule</span></code> Interface</span></a>
      <li><a href="#the-css-property-rule-interface"><span class="secno">6.2</span> <span class="content">The <span><code>CSSPropertyRule</code></span> Interface</span></a>
      <li><a href="#css-style-value-reification"><span class="secno">6.3</span> <span class="content"><code class="idl"><span>CSSStyleValue</span></code> Reification</span></a>
     </ol>
    <li>
     <a href="#examples"><span class="secno">7</span> <span class="content">Examples</span></a>
     <ol class="toc">
      <li><a href="#example-1"><span class="secno">7.1</span> <span class="content">Example 1: Using custom properties to add animation behavior</span></a>
      <li><a href="#example-2"><span class="secno">7.2</span> <span class="content">Example 2: Using <span class="css">@property</span> to register a property</span></a>
     </ol>
    <li><a href="#security-considerations"><span class="secno">8</span> <span class="content">Security Considerations</span></a>
    <li><a href="#privacy-considerations"><span class="secno">9</span> <span class="content">Privacy Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li>
     <a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
     <ol class="toc">
      <li><a href="#property-descriptor-table"><span class="secno"></span> <span class="content"><span>@property</span> Descriptors</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>CSS defines a comprehensive set of properties that can be manipulated in order
to modify the layout, paint, or behaviour of a web document. However, web authors
frequently wish to extend this set with additional properties.</p>
   <p><a data-link-type="biblio" href="#biblio-css-variables">[css-variables]</a> provides primitive means for defining user-controlled properties,
however these properties always take token lists as values, must always inherit, and
can only impact document layout or paint by being re-incorporated into the value
of other properties via a var() reference.</p>
   <p>This specification extends <a data-link-type="biblio" href="#biblio-css-variables">[css-variables]</a>, allowing the registration of properties
that have a value type, an initial value, and a defined inheritance behaviour,
via two methods:</p>
   <ul>
    <li data-md>
     <p>A JS API, the <code class="idl"><a data-link-type="idl" href="#dom-css-registerproperty" id="ref-for-dom-css-registerproperty">registerProperty()</a></code> method</p>
    <li data-md>
     <p>A CSS at-rule, the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property">@property</a> rule</p>
   </ul>
   <p>This specification is complementary to <a data-link-type="biblio" href="#biblio-css-paint-api-1">[css-paint-api-1]</a> and <a data-link-type="biblio" href="#biblio-css-layout-api-1">[css-layout-api-1]</a>, which
allow custom properties to directly impact paint and layout behaviours respectively.</p>
   <h2 class="heading settled" data-level="2" id="behavior-of-custom-properties"><span class="secno">2. </span><span class="content">Registered Custom Properties</span><a class="self-link" href="#behavior-of-custom-properties"></a></h2>
   <p>A <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property">custom property</a> can become a <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="registered" data-noexport id="registered-custom-property">registered custom property</dfn>,
making it act more like a UA-defined property:
giving it a syntax that’s checked by the UA,
an initial value,
and a specific inheritance behavior.
This can be done by the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property①">@property</a> rule,
or the <code class="idl"><a data-link-type="idl" href="#dom-css-registerproperty" id="ref-for-dom-css-registerproperty①">registerProperty()</a></code> JS function.</p>
   <p>A <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property①">custom property</a> is considered to be registered for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> if there is a valid <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②">@property</a> rule
defined for its name
in one of the document’s stylesheets,
or its name is <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists">contained</a> in the document’s <code class="idl"><a data-link-type="idl" href="#dom-window-registeredpropertyset-slot" id="ref-for-dom-window-registeredpropertyset-slot">[[registeredPropertySet]]</a></code> slot
(that is, <code class="idl"><a data-link-type="idl" href="#dom-css-registerproperty" id="ref-for-dom-css-registerproperty②">registerProperty()</a></code> was called to register it).</p>
   <p>A <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property">registered custom property</a> acts similarly to an unregistered <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property②">custom property</a>,
except as defined below.</p>
   <h3 class="heading settled" data-level="2.1" id="determining-registration"><span class="secno">2.1. </span><span class="content">Determining the Registration</span><a class="self-link" href="#determining-registration"></a></h3>
   <p>A <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property①">registered custom property</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="registration" id="custom-property-registration">custom property registration</dfn> that contains all the data necessary to treat it like a real property.
It’s a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct">struct</a> consisting of:</p>
   <ul>
    <li data-md>
     <p>a property name (a <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#custom-property-name-string" id="ref-for-custom-property-name-string">custom property name string</a>)</p>
    <li data-md>
     <p>a syntax (a <a data-link-type="dfn" href="#syntax-string" id="ref-for-syntax-string">syntax string</a>)</p>
    <li data-md>
     <p>an inherit flag (a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#boolean" id="ref-for-boolean">boolean</a>)</p>
    <li data-md>
     <p>optionally, an initial value (a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string">string</a> which successfully <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar">parses</a> according to the syntax)</p>
   </ul>
   <p>If the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code>’s <code class="idl"><a data-link-type="idl" href="#dom-window-registeredpropertyset-slot" id="ref-for-dom-window-registeredpropertyset-slot①">[[registeredPropertySet]]</a></code> slot <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-contain" id="ref-for-list-contain">contains</a> a record with the <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property③">custom property’s</a> name,
the registration is that record.</p>
   <p>Otherwise,
if the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code>’s active stylesheets contain at least one valid <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property③">@property</a> rule
representing a registration with the <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property④">custom property’s</a> name,
the last such one in document order is the registration.</p>
   <p>Otherwise there is no registration,
and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property⑤">custom property</a> is <em>not</em> a <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property②">registered custom property</a>.</p>
   <h3 class="heading settled" data-level="2.2" id="parsing-custom-properties"><span class="secno">2.2. </span><span class="content">Parse-Time Behavior</span><a class="self-link" href="#parsing-custom-properties"></a></h3>
   <p><a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property③">Registered custom properties</a> parse exactly like unregistered <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property⑥">custom properties</a>;
almost anything is allowed.
The registered syntax of the property is <em>not</em> checked at parse time.</p>
   <p class="note" role="note"><span>Note:</span> However,
the syntax is checked at computed-value time,
before substitution via <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var">var()</a>.
See <a href="#calculation-of-computed-values">§ 2.4 Computed Value-Time Behavior</a>.</p>
   <details class="note">
    <summary>Why aren’t custom properties syntax-checked?</summary>
    <p>When parsing a page’s CSS,
	UAs commonly make a number of optimizations
	to help with both speed and memory.</p>
    <p>One of those optimizations
	is that they only store the properties that will actually have an effect;
	they throw away invalid properties,
	and if you write the same property multiple times in a single declaration block,
	all but the last valid one will be thrown away.
	(This is an important part of CSS’s error-recovery
	and forward-compatibility behavior.)</p>
    <p>This works fine if the syntax of a property never changes over the lifetime of a page.
	If a custom property is registered, however,
	it can change its syntax,
	so that a property that was previously invalid
	suddenly becomes valid.</p>
    <p>The only ways to handle this are to either store every declaration,
	even those that were initially invalid
	(increasing the memory cost of pages),
	or to re-parse the entire page’s CSS
	with the new syntax rules
	(increasing the processing cost of registering a custom property).
	Neither of these are very desirable.</p>
    <p>Further,
	UA-defined properties have their syntax determined
	by the version of the UA the user is viewing the page with;
	this is out of the page author’s control,
	which is the entire reason for CSS’s error-recovery behavior
	and the practice of writing multiple declarations for varying levels of support.
	A custom property, on the other hand,
	has its syntax controlled by the page author,
	according to whatever stylesheet or script they’ve included in the page;
	there’s no unpredictability to be managed.
	Throwing away syntax-violating custom properties
	would thus only be, at best, a convenience for the page author,
	not a necessity like for UA-defined properties.</p>
   </details>
   <h3 class="heading settled" data-level="2.3" id="specified-value"><span class="secno">2.3. </span><span class="content"><a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#specified-value" id="ref-for-specified-value">Specified Value</a>-Time Behavior</span><a class="self-link" href="#specified-value"></a></h3>
   <p>Just like unregistered <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property⑦">custom properties</a>,
all <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property④">registered custom properties</a>, regardless of registered syntax,
accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a>,
such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-revert" id="ref-for-valdef-all-revert">revert</a>.
Their behavior is defined in <a href="https://www.w3.org/TR/css-cascade-4/#defaulting-keywords">CSS Cascading 4 §7.3 Explicit Defaulting</a>.</p>
   <h3 class="heading settled" data-level="2.4" id="calculation-of-computed-values"><span class="secno">2.4. </span><span class="content"><a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">Computed Value</a>-Time Behavior</span><a class="self-link" href="#calculation-of-computed-values"></a></h3>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①">computed value</a> of a <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property⑤">registered custom property</a> is determined by the syntax of its <a data-link-type="dfn" href="#custom-property-registration" id="ref-for-custom-property-registration">registration</a>.</p>
   <p>If the <a data-link-type="dfn" href="#custom-property-registration" id="ref-for-custom-property-registration①">registration’s</a> syntax is the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition">universal syntax definition</a>,
the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value②">computed value</a> is the same as for unregistered <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property⑧">custom properties</a> (either the specified value with variables substituted,
or the <a data-link-type="dfn">guaranteed-invalid value</a>).</p>
   <p>Otherwise, attempt to <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar①">parse</a> the property’s value
according to its registered syntax.
If this fails,
the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value③">computed value</a> is the <a data-link-type="dfn">guaranteed-invalid value</a>.
If it succeeds,
the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value④">computed value</a> depends on the specifics of the syntax:</p>
   <p>For <code>"&lt;length>"</code>, <code>"&lt;length-percentage>"</code>, <code>"&lt;angle>"</code>, <code>"&lt;time>"</code>, <code>"&lt;resolution>"</code>, <code>"&lt;integer>"</code>, <code>"&lt;number>"</code>,
and <code>"&lt;percentage>"</code> values:</p>
   <ul>
    <li data-md>
     <p>If the specified value is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#dimension" id="ref-for-dimension">dimension</a> literal
(such as <span class="css">50em</span> or <span class="css">.2s</span>),
the computed value is the same value,
but with the unit converted to the corresponding <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#canonical-unit" id="ref-for-canonical-unit">canonical unit</a> for the type of value.</p>
    <li data-md>
     <p>If the specified value is any other numeric literal
(such as <span class="css">5</span> or <span class="css">20%</span>),
the computed value is as specified.
(In particular, percentages are never resolved against anything.)</p>
    <li data-md>
     <p>If the specified value is a function that evaluates to one of those types
(such as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#math-function" id="ref-for-math-function">math function</a>),
the computed value is defined by that function.</p>
   </ul>
   <p>For <code>"&lt;color>"</code> values,
the value is computed by <a data-link-type="dfn" href="https://drafts.csswg.org/css-color-4/#resolve-color-values" id="ref-for-resolve-color-values">resolving color values</a>.</p>
   <p>For <code>"&lt;custom-ident>"</code>, ident, or <code>"*"</code> values,
the computed value is as specified.</p>
   <p>For <code>"&lt;url>"</code> values,
the computed value is one of the following:</p>
   <ul>
    <li data-md>
     <p>if the URL is a relative URL,
the computed value is the resolved absolute URL as described in <a data-link-type="biblio" href="#biblio-css3-values">[css3-values]</a>.</p>
    <li data-md>
     <p>otherwise, the computed value is as specified.</p>
   </ul>
   <details class="note">
    <summary>URL behavior examples</summary>
    <div class="example" id="example-57a63cfb">
     <a class="self-link" href="#example-57a63cfb"></a> Because URLs resolve against the base URL of the stylesheet they appear in, we can
		end up with multiple relative URLs that resolve against different base URLs, even though
		they appear in the same property. 
     <p>For example, suppose <a class="property" data-link-type="propdesc">--url-foo</a> and <a class="property" data-link-type="propdesc">--url-bar</a> are registered
		custom properties with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value">&lt;url></a> syntax, and that we have a stylesheet at <code>/style/foo/foo.css</code>:</p>
<pre class="lang-css highlight"><c- f>div </c-><c- p>{</c->
  <c- k>--url-foo</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"foo.png"</c-><c- p>);</c->
<c- p>}</c->
</pre>
     <p>and another stylesheet at <code>/style/bar/bar.css</code></p>
<pre class="lang-css highlight"><c- f>div </c-><c- p>{</c->
  <c- k>--url-bar</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"bar.png"</c-><c- p>);</c->
<c- p>}</c->
</pre>
     <p>and finally a document at <code>/index.html</code>:</p>
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>link</c-> <c- e>href</c-><c- o>=</c-><c- s>"/style/foo/foo.css"</c-> <c- e>rel</c-><c- o>=</c-><c- s>"stylesheet"</c-> <c- e>type</c-><c- o>=</c-><c- s>"text/css"</c-><c- p>></c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>href</c-><c- o>=</c-><c- s>"/style/bar/bar.css"</c-> <c- e>rel</c-><c- o>=</c-><c- s>"stylesheet"</c-> <c- e>type</c-><c- o>=</c-><c- s>"text/css"</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"background-image: var(--url-foo), var(---url-bar);"</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
     <p>Here, the <span class="css">var(--url-foo)</span> reference would produce a URL that resolves against <code>/style/foo</code>, and the <span class="css">var(--url-bar)</span> reference would produce a URL that resolves
		against <code>/style/bar</code>.</p>
     <p>On the other hand,
		if both <a class="property" data-link-type="propdesc">--url-foo</a> and <a class="property" data-link-type="propdesc">--url-bar</a> were <em>un</em>registered,
		they would substitute their literal values
		(relative URLs)
		into the <code>/index.html</code> stylesheet,
		which would then resolve the URLs against <code>/index.html</code> instead.</p>
    </div>
   </details>
   <p>For <code>"&lt;image>"</code> values,
the computed value is the <a data-link-type="dfn">computed &lt;image></a>.</p>
   <p>For <code>"&lt;transform-function>"</code> and <code>"&lt;transform-list>"</code> values,
the computed value is as specified but with all lengths resolved to their computed values.</p>
   <p>For values with <a href="#multipliers">multipliers</a>,
the computed value is a list of the computed values of the base type.</p>
   <p>For syntaxes specified with <a href="#combinator">the | combinator</a>,
the computed value is given by applying the computed-value rules
for the first clause that matches the value.</p>
   <h3 class="heading settled" data-level="2.5" id="animation-behavior-of-custom-properties"><span class="secno">2.5. </span><span class="content">Animation Behavior</span><a class="self-link" href="#animation-behavior-of-custom-properties"></a></h3>
   <p class="note" role="note"><span>Note:</span> As defined by <a data-link-type="biblio" href="#biblio-css3-animations">[css3-animations]</a> and <a data-link-type="biblio" href="#biblio-css3-transitions">[css3-transitions]</a>, it is possible to
specify animations and transitions that reference custom properties.</p>
   <p>When referenced by animations and transitions,
custom property values <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#interpolation" id="ref-for-interpolation">interpolate</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#by-computed-value" id="ref-for-by-computed-value">by computed value</a>,
in accordance with the type that they parsed as.</p>
   <p class="note" role="note"><span>Note:</span> This implies that a list of values,
such as <code>&lt;color>+</code> or <code>&lt;color>#</code>,
will interpolate as a simple list,
matching up each component index-by-index,
and failing if the number of components doesn’t match.</p>
   <p>As an exception to the above rule,
a value that parsed as a <code>&lt;transform-list></code>,
a <code>&lt;transform-function></code>,
or a <code>&lt;transform-function>+</code> instead interpolates as per the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a> property.</p>
   <p class="note" role="note"><span>Note:</span> If,
for whatever reason,
a custom property is defined with a syntax of <code>&lt;transform-function>#</code>,
this will thus first interpolate as a simple list,
and then each list item will interpolate as a <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform①">transform</a> value.</p>
   <p class="note" role="note"><span>Note:</span> Registering (or changing the registration) of a custom property
can change its computed value,
which can start or interrupt a CSS transition.</p>
   <h3 class="heading settled" data-level="2.6" id="conditional-rules"><span class="secno">2.6. </span><span class="content">Conditional Rules</span><a class="self-link" href="#conditional-rules"></a></h3>
   <p>As stated in <a href="#parsing-custom-properties">§ 2.2 Parse-Time Behavior</a>,
both unregistered and <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property⑥">registered</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property⑨">custom properties</a> accept (almost) all possible values at parse-time. <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property⑦">Registered</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property①⓪">custom properties</a> only apply their syntax at <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑤">computed value</a> time.</p>
   <p>So, all <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property①①">custom properties</a>,
regardless of whether they’re <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property⑧">registered</a> or unregistered,
will test as "true" in an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports">@supports</a> rule,
so long as you don’t violate the (very liberal) generic syntax for <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property①②">custom properties</a>.</p>
   <div class="example" id="example-7f722ab8"><a class="self-link" href="#example-7f722ab8"></a> For example,
	even if a custom property is registered
	with <code class="highlight">syntax: "&lt;color>";</code>,
	a rule like <code>@supports (--foo: 1em) {...}</code> will still evaluate as true and apply those styles,
	because the declaration <em>does</em> successfully parse as a valid property. </div>
   <h3 class="heading settled" data-level="2.7" id="substitution"><span class="secno">2.7. </span><span class="content">Substitution via <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var①">var()</a></span><a class="self-link" href="#substitution"></a></h3>
   <p>Like unregistered custom properties,
the value of a registered custom property can be substituted into another value with the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var②">var()</a> function.
However, registered custom properties substitute as their <a href="#calculation-of-computed-values">computed value</a>,
rather than the original token sequence used to produce that value.</p>
   <p>Any <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var③">var()</a> function that references a registered custom property
must be replaced with an <dfn data-dfn-type="dfn" data-export id="equivalent-token-sequence">equivalent token sequence<a class="self-link" href="#equivalent-token-sequence"></a></dfn>,
which is equal to the token sequence that would have been produced
by <span spec-section="#serialize-a-css-value">serializing</span> the computed value,
and <a href="https://www.w3.org/TR/css-syntax-3/#tokenization">tokenizing</a> the resulting string.</p>
   <div class="example" id="example-b86c332c">
    <a class="self-link" href="#example-b86c332c"></a> Suppose that <a class="property" data-link-type="propdesc">--x</a> is registered with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value">&lt;length></a> syntax,
	and that '--y’is an unregistered custom property. 
<pre class="lang-css highlight"><c- f>div </c-><c- p>{</c->
  <c- k>font-size</c-><c- p>:</c-> <c- m>10</c-><c- l>px</c-><c- p>;</c->
  <c- k>--x</c-><c- p>:</c-> <c- m>8</c-><c- l>em</c-><c- p>;</c->
  <c- k>--y</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--x<c- p>);</c->
<c- p>}</c->
</pre>
    <p>Because the computed value of <a class="property" data-link-type="propdesc">--x</a> (when serialized)  is "80px",
	the computed value of <a class="property" data-link-type="propdesc">--y</a> is
	a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token">&lt;dimension-token></a> with a value of "80" and unit "px".</p>
   </div>
   <h4 class="heading settled" data-level="2.7.1" id="fallbacks-in-var-references"><span class="secno">2.7.1. </span><span class="content">Fallbacks In <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var④">var()</a> References</span><a class="self-link" href="#fallbacks-in-var-references"></a></h4>
   <p>References to registered custom properties using the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var⑤">var()</a> function may
provide a fallback. However, the fallback value must match the <a data-link-type="dfn" href="#syntax-definition" id="ref-for-syntax-definition">syntax definition</a> of the custom property being referenced, otherwise the
declaration is <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time">invalid at computed-value time</a>.</p>
   <p class="note" role="note"><span>Note:</span> This applies regardless of whether or not the fallback is being used.</p>
   <h4 class="heading settled" data-level="2.7.2" id="dependency-cycles"><span class="secno">2.7.2. </span><span class="content">Dependency Cycles via Relative Units</span><a class="self-link" href="#dependency-cycles"></a></h4>
   <p><a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property⑨">Registered custom properties</a> follow the same rules for dependency cycle resolution
as unregistered <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property①③">custom properties</a>,
with the following additional constraints:</p>
   <p>For any registered custom property
with a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value①" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> or <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage">&lt;length-percentage></a> syntax component:</p>
   <ul>
    <li data-md>
     <p>If the property contains any of the following units: <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#em" id="ref-for-em">em</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#ex" id="ref-for-ex">ex</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#cap" id="ref-for-cap">cap</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#ch" id="ref-for-ch">ch</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#ic" id="ref-for-ic">ic</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#lh" id="ref-for-lh">lh</a>;
then add an edge between the property
and the <span class="css">font-size</span> of the current element.</p>
    <li data-md>
     <p>If the property contains the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#lh" id="ref-for-lh①">lh</a> unit,
add an edge between the property
and the <span class="css">line-height</span> of the current element.</p>
    <li data-md>
     <p>If the property contains any of the following units: <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#rem" id="ref-for-rem">rem</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#rlh" id="ref-for-rlh">rlh</a>;
then add an edge between the property
and the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a>' of the root element.</p>
    <li data-md>
     <p>If the property contains the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#rlh" id="ref-for-rlh①">rlh</a> unit,
add an edge between the property
and the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height">line-height</a>' of the root element.</p>
   </ul>
   <div class="example" id="example-a47a7332">
    <a class="self-link" href="#example-a47a7332"></a> For example, given this registration: 
<pre class="lang-javascript highlight">CSS<c- p>.</c->registerProperty<c- p>({</c->
  name<c- o>:</c-> <c- u>"--my-font-size"</c-><c- p>,</c->
  syntax<c- o>:</c-> <c- u>"&lt;length>"</c-><c- p>,</c->
  initialValue<c- o>:</c-> <c- u>"0px"</c-><c- p>,</c->
  inherits<c- o>:</c-> <c- kc>false</c->
<c- p>});</c->
</pre>
    <p>the following will produce a dependency cycle:</p>
<pre class="lang-css highlight"><c- f>div </c-><c- p>{</c->
  <c- k>--my-font-size</c-><c- p>:</c-> <c- m>10</c-><c- l>em</c-><c- p>;</c->
  <c- k>font-size</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--my-font-size<c- p>);</c->
<c- p>}</c->
</pre>
    <p>and <span class="css">font-size</span> will behave as if the value <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-unset" id="ref-for-valdef-all-unset">unset</a> was specified.</p>
   </div>
   <h2 class="heading settled" data-level="3" id="at-property-rule"><span class="secno">3. </span><span class="content">The <dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-property">@property</dfn> Rule</span><a class="self-link" href="#at-property-rule"></a></h2>
   <p>The <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property④">@property</a> rule represents a <a data-link-type="dfn" href="#custom-property-registration" id="ref-for-custom-property-registration②">custom property registration</a> directly in a stylesheet
without having to run any JS.
Valid <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property⑤">@property</a> rules result in a <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property①⓪">registered custom property</a>,
as if <code class="idl"><a data-link-type="idl" href="#dom-css-registerproperty" id="ref-for-dom-css-registerproperty③">registerProperty()</a></code> had been called with equivalent parameters.</p>
   <p>The syntax of <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property⑥">@property</a> is:</p>
<pre class="prod def">@property <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name">&lt;custom-property-name></a> {
  <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list">&lt;declaration-list></a>
}
</pre>
   <p>A valid <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property⑦">@property</a> rule represents a <a data-link-type="dfn" href="#custom-property-registration" id="ref-for-custom-property-registration③">custom property registration</a>,
with the property name being the serialization of the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name①">&lt;custom-property-name></a> in the rule’s prelude.</p>
   <p><a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property⑧">@property</a> rules require a <a class="property" data-link-type="propdesc" href="#descdef-property-syntax" id="ref-for-descdef-property-syntax">syntax</a> and <a class="property" data-link-type="propdesc" href="#descdef-property-inherits" id="ref-for-descdef-property-inherits">inherits</a> descriptor;
if either are missing,
the entire rule is invalid and must be ignored.
The <a class="property" data-link-type="propdesc" href="#descdef-property-initial-value" id="ref-for-descdef-property-initial-value">initial-value</a> descriptor is optional
only if the syntax is the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition①">universal syntax definition</a>,
otherwise the descriptor is required;
if it’s missing, the entire rule is invalid and must be ignored.</p>
   <p>Unknown descriptors are invalid and ignored,
but do not invalidate the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property⑨">@property</a> rule.</p>
   <p class="note" role="note"><span>Note:</span> As specified in <a href="#determining-registration">§ 2.1 Determining the Registration</a>,
if multiple valid <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property①⓪">@property</a> rules are defined for the same <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name②">&lt;custom-property-name></a>,
the last one in stylesheet order "wins".
A custom property registration from <code class="idl"><a data-link-type="idl" href="#dom-css-registerproperty" id="ref-for-dom-css-registerproperty④">CSS.registerProperty()</a></code> further wins over any <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property①①">@property</a> rules
for the same <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name③">&lt;custom-property-name></a>.</p>
   <p>A <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property①②">@property</a> is invalid if it occurs in a stylesheet inside of a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree">shadow tree</a>,
and must be ignored.</p>
   <p class="issue" id="issue-14fa952d"><a class="self-link" href="#issue-14fa952d"></a> This will likely change in the future,
as the behavior of concept-defining at-rules in shadow trees
becomes more consistently defined. <a href="https://github.com/w3c/css-houdini-drafts/issues/939">&lt;https://github.com/w3c/css-houdini-drafts/issues/939></a></p>
   <h3 class="heading settled" data-level="3.1" id="the-syntax-descriptor"><span class="secno">3.1. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#descdef-property-syntax" id="ref-for-descdef-property-syntax①">syntax</a> Descriptor</span><a class="self-link" href="#the-syntax-descriptor"></a></h3>
   <table class="def descdef">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-for="@property" data-dfn-type="descriptor" data-export id="descdef-property-syntax">syntax</dfn>
     <tr>
      <th>For:
      <td><a class="css" data-link-type="at-rule" href="#at-ruledef-property" id="ref-for-at-ruledef-property①③">@property</a> 
     <tr>
      <th>Value:
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value">&lt;string></a> 
     <tr>
      <th>Initial:
      <td>n/a (see prose) 
   </table>
   <p>Specifies the syntax of the <a data-link-type="dfn" href="#custom-property-registration" id="ref-for-custom-property-registration④">custom property registration</a> represented by the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property①④">@property</a> rule,
controlling how the property’s value is parsed at <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value⑥">computed value</a> time.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#descdef-property-syntax" id="ref-for-descdef-property-syntax②">syntax</a> descriptor is required for the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property①⑤">@property</a> rule to be valid;
if it’s missing, the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property①⑥">@property</a> rule is invalid.</p>
   <p>If the provided string is not a valid <a data-link-type="dfn" href="#syntax-string" id="ref-for-syntax-string①">syntax string</a> (if it returns failure when <a data-link-type="dfn" href="#consume-a-syntax-definition" id="ref-for-consume-a-syntax-definition">consume a syntax definition</a> is called on it),
the descriptor is invalid and must be ignored.</p>
   <h3 class="heading settled" data-level="3.2" id="inherits-descriptor"><span class="secno">3.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#descdef-property-inherits" id="ref-for-descdef-property-inherits①">inherits</a> Descriptor</span><a class="self-link" href="#inherits-descriptor"></a></h3>
   <table class="def descdef">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-for="@property" data-dfn-type="descriptor" data-export id="descdef-property-inherits">inherits</dfn>
     <tr>
      <th>For:
      <td><a class="css" data-link-type="at-rule" href="#at-ruledef-property" id="ref-for-at-ruledef-property①⑦">@property</a> 
     <tr>
      <th>Value:
      <td class="prod">true <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> false 
     <tr>
      <th>Initial:
      <td>n/a (see prose) 
   </table>
   <p>Specifies the inherit flag of the <a data-link-type="dfn" href="#custom-property-registration" id="ref-for-custom-property-registration⑤">custom property registration</a> represented by the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property①⑧">@property</a> rule,
controlling whether or not the property inherits by default.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#descdef-property-inherits" id="ref-for-descdef-property-inherits②">inherits</a> descriptor is required for the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property①⑨">@property</a> rule to be valid;
if it’s missing, the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②⓪">@property</a> rule is invalid.</p>
   <h3 class="heading settled" data-level="3.3" id="initial-value-descriptor"><span class="secno">3.3. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#descdef-property-initial-value" id="ref-for-descdef-property-initial-value①">initial-value</a> Descriptor</span><a class="self-link" href="#initial-value-descriptor"></a></h3>
   <table class="def descdef">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-for="@property" data-dfn-type="descriptor" data-export id="descdef-property-initial-value">initial-value</dfn>
     <tr>
      <th>For:
      <td><a class="css" data-link-type="at-rule" href="#at-ruledef-property" id="ref-for-at-ruledef-property②①">@property</a> 
     <tr>
      <th>Value:
      <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value">&lt;declaration-value></a> 
     <tr>
      <th>Initial:
      <td>the <a data-link-type="dfn">guaranteed-invalid value</a> (but see prose) 
   </table>
   <p>Specifies the initial value of the <a data-link-type="dfn" href="#custom-property-registration" id="ref-for-custom-property-registration⑥">custom property registration</a> represented by the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②②">@property</a> rule,
controlling the property’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#initial-value" id="ref-for-initial-value">initial value</a>.</p>
   <p>If the value of the <a class="property" data-link-type="propdesc" href="#descdef-property-syntax" id="ref-for-descdef-property-syntax③">syntax</a> descriptor is the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition②">universal syntax definition</a>,
then the <a class="property" data-link-type="propdesc" href="#descdef-property-initial-value" id="ref-for-descdef-property-initial-value②">initial-value</a> descriptor is optional.
If omitted, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#initial-value" id="ref-for-initial-value①">initial value</a> of the property is the <a data-link-type="dfn">guaranteed-invalid value</a>.</p>
   <p>Otherwise,
if the value of the <a class="property" data-link-type="propdesc" href="#descdef-property-syntax" id="ref-for-descdef-property-syntax④">syntax</a> descriptor is not the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition③">universal syntax definition</a>,
the following conditions must be met for the the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②③">@property</a> rule to be valid:</p>
   <ul>
    <li data-md>
     <p>The <a class="property" data-link-type="propdesc" href="#descdef-property-initial-value" id="ref-for-descdef-property-initial-value③">initial-value</a> descriptor must be present.</p>
    <li data-md>
     <p>The <a class="property" data-link-type="propdesc" href="#descdef-property-initial-value" id="ref-for-descdef-property-initial-value④">initial-value</a> descriptor’s value must <a data-link-type="dfn" href="#consume-a-syntax-definition" id="ref-for-consume-a-syntax-definition①">parse successfully</a> according to the grammar specified by the <a data-link-type="dfn" href="#syntax-definition" id="ref-for-syntax-definition①">syntax definition</a>.</p>
    <li data-md>
     <p>The <a class="property" data-link-type="propdesc" href="#descdef-property-initial-value" id="ref-for-descdef-property-initial-value⑤">initial-value</a> must be <a data-link-type="dfn" href="#computationally-independent" id="ref-for-computationally-independent">computationally independent</a>.</p>
   </ul>
   <p>If the above conditions are not met, the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②④">@property</a> rule is invalid.</p>
   <h2 class="heading settled" data-level="4" id="registering-custom-properties"><span class="secno">4. </span><span class="content">Registering Custom Properties in JS</span><a class="self-link" href="#registering-custom-properties"></a></h2>
   <p>To register a custom property via JS,
the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#css" id="ref-for-css">CSS</a></code> object is extended with a <code class="idl"><a data-link-type="idl" href="#dom-css-registerproperty" id="ref-for-dom-css-registerproperty⑤">registerProperty()</a></code> method:</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="#dictdef-propertydefinition" id="ref-for-dictdef-propertydefinition"><c- g>PropertyDefinition</c-></a> {
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="DOMString " href="#dom-propertydefinition-name" id="ref-for-dom-propertydefinition-name"><c- g>name</c-></a>;
           <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;*&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-propertydefinition-syntax" id="ref-for-dom-propertydefinition-syntax"><c- g>syntax</c-></a>       = "*";
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a>   <a class="idl-code" data-link-type="dict-member" data-type="boolean   " href="#dom-propertydefinition-inherits" id="ref-for-dom-propertydefinition-inherits"><c- g>inherits</c-></a>;
           <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="DOMString " href="#dom-propertydefinition-initialvalue" id="ref-for-dom-propertydefinition-initialvalue"><c- g>initialValue</c-></a>;
};

<c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css"><c- g>CSS</c-></a> {
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-css-registerproperty" id="ref-for-dom-css-registerproperty⑥"><c- g>registerProperty</c-></a>(<a class="n" data-link-type="idl-name" href="#dictdef-propertydefinition" id="ref-for-dictdef-propertydefinition①"><c- n>PropertyDefinition</c-></a> <dfn class="idl-code" data-dfn-for="CSS/registerProperty(definition)" data-dfn-type="argument" data-export id="dom-css-registerproperty-definition-definition"><code><c- g>definition</c-></code><a class="self-link" href="#dom-css-registerproperty-definition-definition"></a></dfn>);
};
</pre>
   <p>Additional, the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code> object gains a new <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-registeredpropertyset-slot"><code>[[registeredPropertySet]]</code></dfn> private slot,
which is a set of records that describe registered custom properties.</p>
   <h3 class="heading settled" data-level="4.1" id="the-registerproperty-function"><span class="secno">4.1. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#dom-css-registerproperty" id="ref-for-dom-css-registerproperty⑦">registerProperty()</a></code> Function</span><a class="self-link" href="#the-registerproperty-function"></a></h3>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="CSS" data-dfn-type="method" data-export data-lt="registerProperty(definition)" id="dom-css-registerproperty"><code>registerProperty(PropertyDefinition definition)</code></dfn> method
registers a custom property according to the configuration options provided in <code>definition</code>.
When it is called,
it executes the <a data-link-type="dfn" href="#register-a-custom-property" id="ref-for-register-a-custom-property">register a custom property</a> algorithm,
passing the options in its <code>definition</code> argument
as arguments of the same names.</p>
   <div class="algorithm" data-algorithm="register a custom property">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="register-a-custom-property">register a custom property</dfn> with <var>name</var> being a string,
	and optionally <var>syntax</var> being a string, <var>inherits</var> being a boolean,
	and <var>initialValue</var> being a string,
	execute these steps: 
    <ol>
     <li data-md>
      <p>Let <var>property set</var> be the value of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object’s</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#concept-document-window" id="ref-for-concept-document-window">associated <code>Document</code></a>’s <code class="idl"><a data-link-type="idl" href="#dom-window-registeredpropertyset-slot" id="ref-for-dom-window-registeredpropertyset-slot②">[[registeredPropertySet]]</a></code> slot.</p>
     <li data-md>
      <p>If <var>name</var> is not a <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#custom-property-name-string" id="ref-for-custom-property-name-string①">custom property name string</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror">SyntaxError</a></code> and exit this algorithm.</p>
      <p>If <var>property set</var> already contains an entry with <var>name</var> as its property name
(compared codepoint-wise), <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> an <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidmodificationerror" id="ref-for-invalidmodificationerror">InvalidModificationError</a></code> and exit this algorithm.</p>
     <li data-md>
      <p>Attempt to <a data-link-type="dfn" href="#consume-a-syntax-definition" id="ref-for-consume-a-syntax-definition②">consume a syntax definition</a> from <var>syntax</var>.
If it returns failure, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw②">throw</a> a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror①">SyntaxError</a></code>.
Otherwise, let <var>syntax definition</var> be the returned <a data-link-type="dfn" href="#syntax-definition" id="ref-for-syntax-definition②">syntax definition</a>.</p>
     <li data-md>
      <p>If <var>syntax definition</var> is the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition④">universal syntax definition</a>,
and <var>initialValue</var> is not present,
let <var>parsed initial value</var> be empty.
This must be treated identically to the "default" initial value of custom properties,
as defined in <a data-link-type="biblio" href="#biblio-css-variables">[css-variables]</a>.
Skip to the next step of this algorithm.</p>
      <p>Otherwise,
if <var>syntax definition</var> is the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition⑤">universal syntax definition</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar②">parse</a> <var>initialValue</var> as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①">&lt;declaration-value></a>.
If this fails, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw③">throw</a> a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror②">SyntaxError</a></code> and exit this algorithm.
Otherwise,
let <var>parsed initial value</var> be the parsed result.
Skip to the next step of this algorithm.</p>
      <p>Otherwise, if <var>initialValue</var> is not present, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw④">throw</a> a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror③">SyntaxError</a></code> and exit this algorithm.</p>
      <p>Otherwise, <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar③">parse</a> <code class="idl"><a data-link-type="idl" href="#dom-propertydefinition-initialvalue" id="ref-for-dom-propertydefinition-initialvalue①">initialValue</a></code> according to <var>syntax definition</var>.
If this fails, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑤">throw</a> a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror④">SyntaxError</a></code> and exit this algorithm.</p>
      <p>Otherwise, let <var>parsed initial value</var> be the parsed result.
If <var>parsed initial value</var> is not <a data-link-type="dfn" href="#computationally-independent" id="ref-for-computationally-independent①">computationally independent</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw⑥">throw</a> a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror⑤">SyntaxError</a></code> and exit this algorithm.</p>
     <li data-md>
      <p>Set <var>inherit flag</var> to the value of <var>inherits</var>.</p>
     <li data-md>
      <p>Let <var>registered property</var> be a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct①">struct</a> with a property name of <var>name</var>,
a syntax of <var>syntax definition</var>,
an initial value of <var>parsed initial value</var>,
and an inherit flag of <var>inherit flag</var>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#set-append" id="ref-for-set-append">Append</a> <var>registered property</var> to <var>property set</var>.</p>
    </ol>
   </div>
   <p>A property value is <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="computationally-independent">computationally independent</dfn> if it can be converted into a computed value
using only the value of the property on the element,
and "global" information that cannot be changed by CSS.</p>
   <div class="example" id="example-65c0ed48">
    <a class="self-link" href="#example-65c0ed48"></a> For example, <span class="css">5px</span> is <a data-link-type="dfn" href="#computationally-independent" id="ref-for-computationally-independent②">computationally independent</a>,
	as converting it into a computed value doesn’t change it at all.
	Similarly, <span class="css">1in</span> is <a data-link-type="dfn" href="#computationally-independent" id="ref-for-computationally-independent③">computationally independent</a>,
	as converting it into a computed value
	relies only on the "global knowledge" that <span class="css">1in</span> is <span class="css">96px</span>,
	which can’t be altered or adjusted by anything in CSS. 
    <p>On the other hand, <span class="css">3em</span> is not <a data-link-type="dfn" href="#computationally-independent" id="ref-for-computationally-independent④">computationally independent</a>,
	because it relies on the value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size①">font-size</a> on the element
	(or the element’s parent).
	Neither is a value with a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var⑥">var()</a> function,
	because it relies on the value of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property①④">custom property</a>.</p>
   </div>
   <p>When a custom property is registered with a given type,
the process via which specified values for that property are turned into computed values
is defined fully by the type selected,
as described in <a href="#calculation-of-computed-values">§ 2.4 Computed Value-Time Behavior</a>.</p>
   <p class="note" role="note"><span>Note:</span> A way to unregister properties may be added in the future.</p>
   <p>Registering a custom property must <strong>not</strong> affect the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade" id="ref-for-cascade">cascade</a> in any way.
Regardless of what syntax is specified for a registered property,
at parse time it is still parsed as normal for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property①⑤">custom property</a>,
accepting nearly anything.
If the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#specified-value" id="ref-for-specified-value①">specified value</a> for a <a data-link-type="dfn" href="#registered-custom-property" id="ref-for-registered-custom-property①①">registered custom property</a> violates the registered syntax,
however,
the property becomes <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time①">invalid at computed-value time</a> (and thus resets to the registered initial value).</p>
   <div class="example" id="example-07b45dff">
    <a class="self-link" href="#example-07b45dff"></a> By default, all custom property declarations that can be parsed as a sequence of tokens
	are valid. Hence, the result of this stylesheet: 
<pre class="lang-css highlight"><c- f>.thing </c-><c- p>{</c->
  <c- k>--my-color</c-><c- p>:</c-> green<c- p>;</c->
  <c- k>--my-color</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"not-a-color"</c-><c- p>);</c->
  <c- k>color</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--my-color<c- p>);</c->
<c- p>}</c->
</pre>
    <p>is to set the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a> property of elements of class "thing" to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit" id="ref-for-valdef-all-inherit①">inherit</a>.
	The second <a class="property" data-link-type="propdesc">--my-color</a> declaration overrides the first at parse time (both are valid),
	and the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-variables-1/#funcdef-var" id="ref-for-funcdef-var⑦">var()</a> reference in the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color①">color</a> property is found to be <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time②">invalid at computed-value time</a> (because <span class="css">url("not-a-color")</span> is not a color).
	At this stage of the CSS pipeline (computation time),
	the only available fallback is the initial value of the property,
	which in the case of color is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit" id="ref-for-valdef-all-inherit②">inherit</a>.
	Although there was a valid usable value (green),
	this was removed during parsing because it was superseded by the URL.</p>
    <p>If we call:</p>
<pre class="lang-javascript highlight">CSS<c- p>.</c->registerProperty<c- p>({</c->
  name<c- o>:</c-> <c- u>"--my-color"</c-><c- p>,</c->
  syntax<c- o>:</c-> <c- u>"&lt;color>"</c-><c- p>,</c->
  initialValue<c- o>:</c-> <c- u>"black"</c-><c- p>,</c->
  inherits<c- o>:</c-> <c- kc>false</c->
<c- p>});</c->
</pre>
    <p>the parsing doesn’t significantly change,
	regardless of whether the registration occurs before or after the stylesheet above.
	The only difference is that it’s the <a class="property" data-link-type="propdesc">--my-color</a> property that becomes <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time③">invalid at computed-value time</a> instead
	and gets set to its initial value of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-black" id="ref-for-valdef-color-black">black</a>;
	then <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color②">color</a> is validly set to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-black" id="ref-for-valdef-color-black①">black</a>,
	rather than being <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time④">invalid at computed-value time</a> and becoming <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit" id="ref-for-valdef-all-inherit③">inherit</a>.</p>
   </div>
   <h3 class="heading settled" data-level="4.2" id="the-propertydefinition-dictionary"><span class="secno">4.2. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#dictdef-propertydefinition" id="ref-for-dictdef-propertydefinition②">PropertyDefinition</a></code> Dictionary</span><a class="self-link" href="#the-propertydefinition-dictionary"></a></h3>
   <p>A <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-propertydefinition"><code>PropertyDefinition</code></dfn> dictionary represents author-specified configuration
options for a custom property. <code class="idl"><a data-link-type="idl" href="#dictdef-propertydefinition" id="ref-for-dictdef-propertydefinition③">PropertyDefinition</a></code> dictionaries contain the
following members:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="PropertyDefinition" data-dfn-type="dict-member" data-export id="dom-propertydefinition-name"><code>name</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③">DOMString</a></span>
    <dd data-md>
     <p>The name of the custom property being defined.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="PropertyDefinition" data-dfn-type="dict-member" data-export id="dom-propertydefinition-syntax"><code>syntax</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④">DOMString</a>, defaulting to <code>"*"</code></span>
    <dd data-md>
     <p>A string representing how this custom property is parsed.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="PropertyDefinition" data-dfn-type="dict-member" data-export id="dom-propertydefinition-inherits"><code>inherits</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①">boolean</a></span>
    <dd data-md>
     <p>True if this custom property should inherit down the DOM tree; False otherwise.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="PropertyDefinition" data-dfn-type="dict-member" data-export id="dom-propertydefinition-initialvalue"><code>initialValue</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤">DOMString</a></span>
    <dd data-md>
     <p>The initial value of this custom property.</p>
   </dl>
   <h2 class="heading settled" data-level="5" id="syntax-strings"><span class="secno">5. </span><span class="content">Syntax Strings</span><a class="self-link" href="#syntax-strings"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="syntax-string">syntax string</dfn> describes the value types accepted by a registered
custom property. Syntax strings consists of <a data-link-type="dfn" href="#syntax-component-name" id="ref-for-syntax-component-name">syntax component names</a>, that are
optionally <a href="#multipliers">multiplied</a> and <a href="#combinator">combined</a>.</p>
   <p>A syntax string can be parsed into a <a data-link-type="dfn" href="#syntax-definition" id="ref-for-syntax-definition③">syntax definition</a>, which is either:</p>
   <ol>
    <li data-md>
     <p>A list of <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component">syntax components</a>, each of which accept the value types
specified in <a href="#supported-names">§ 5.1 Supported Names</a>, or</p>
    <li data-md>
     <p>The <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition⑥">universal syntax definition</a> (<a class="property" data-link-type="propdesc">*</a>), which accepts any valid token
stream.</p>
   </ol>
   <p class="note" role="note"><span>Note:</span> Regardless of the syntax specified, all custom properties accept <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords①">CSS-wide keywords</a>, and process these values
appropriately.</p>
   <div class="example" id="example-624a132d">
    <a class="self-link" href="#example-624a132d"></a> For example, the following are all valid syntax strings. 
    <dl>
     <dt data-md><code>"&lt;length>"</code>
     <dd data-md>
      <p>accepts length values</p>
     <dt data-md><code>"&lt;length> | &lt;percentage>"</code>
     <dd data-md>
      <p>accepts lengths, percentages, percentage calc expressions, and length calc
expressions, but not calc expressions containing a combination of length
and percentage values.</p>
     <dt data-md><code>"&lt;length-percentage>"</code>
     <dd data-md>
      <p>accepts all values that <code>"&lt;length> | &lt;percentage>"</code> would
accept, as well as calc expressions containing a combination of both length
and percentage values.</p>
     <dt data-md><code>"big | bigger | BIGGER"</code>
     <dd data-md>
      <p>accepts the ident <code>big</code>, or the ident <code>bigger</code>, or
the ident <code>BIGGER</code>.</p>
     <dt data-md><code>"&lt;length>+"</code>
     <dd data-md>
      <p>accepts a space-separated list of length values.</p>
     <dt data-md>"*"
     <dd data-md>
      <p>accepts any valid token stream</p>
    </dl>
   </div>
   <p class="note" role="note"><span>Note:</span> The internal grammar of syntax strings is a subset of <a href="https://www.w3.org/TR/css3-values/#value-defs">the CSS Value Definition Syntax</a>. Future levels of this specification are expected
to expand the complexity of the allowed grammar, allowing custom properties
that more closely resemble the full breadth of what CSS properties allow.</p>
   <p>The remainder of this chapter describes the internal grammar of the syntax
strings.</p>
   <h3 class="heading settled" data-level="5.1" id="supported-names"><span class="secno">5.1. </span><span class="content">Supported Names</span><a class="self-link" href="#supported-names"></a></h3>
   <p>This section defines the <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-lt="supported syntax component name" data-noexport id="css-supported-syntax-component-name">supported syntax component names</dfn>, and the
corresponding types accepted by the resulting <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component①">syntax component</a>.</p>
   <dl>
    <dt data-md>"&lt;length>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value②" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> value</p>
    <dt data-md>"&lt;number>"
    <dd data-md>
     <p><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value">&lt;number></a> values</p>
    <dt data-md>"&lt;percentage>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value">&lt;percentage></a> value</p>
    <dt data-md>"&lt;length-percentage>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value③" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> or <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value①">&lt;percentage></a> value, any valid <a class="production css" data-link-type="function" href="https://drafts.csswg.org/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc">&lt;calc()></a> expression combining <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value④" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> and <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value②">&lt;percentage></a> components.</p>
    <dt data-md>"&lt;color>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a> value</p>
    <dt data-md>"&lt;image>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image">&lt;image></a> value</p>
    <dt data-md>"&lt;url>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value①">&lt;url></a> value</p>
    <dt data-md>"&lt;integer>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value">&lt;integer></a> value</p>
    <dt data-md>"&lt;angle>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value" title="Expands to: turn | rad | grad | deg">&lt;angle></a> value</p>
    <dt data-md>"&lt;time>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value" title="Expands to: s | ms">&lt;time></a> value</p>
    <dt data-md>"&lt;resolution>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#resolution-value" id="ref-for-resolution-value" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a> value</p>
    <dt data-md>"&lt;transform-function>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-transforms-1/#typedef-transform-function" id="ref-for-typedef-transform-function">&lt;transform-function></a> value</p>
    <dt data-md>"&lt;custom-ident>"
    <dd data-md>
     <p>Any valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value">&lt;custom-ident></a> value</p>
    <dt data-md>Any sequence which <a href="https://www.w3.org/TR/css-syntax-3/#would-start-an-identifier">starts an identifier</a>, <a href="https://drafts.csswg.org/css-syntax-3/#consume-name">can be consumed as a name</a>, and matches the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value①">&lt;custom-ident></a> production
    <dd data-md>
     <p>That identifier</p>
     <p class="note" role="note"><span>Note:</span> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value②">&lt;custom-ident></a>s are compared codepoint-wise with each other;
	this is different than the normal behavior of UA-defined CSS
	which limits itself to ASCII
	and is <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive">ASCII case-insensitive</a>.
	So, specifying an ident like <code>Red</code> means that the precise value <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-red" id="ref-for-valdef-color-red">Red</a> is accepted; <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-red" id="ref-for-valdef-color-red①">red</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-red" id="ref-for-valdef-color-red②">RED</a>, and any other casing variants are not matched by this.
	It is recommended that idents be restricted to ASCII and written in lower-case,
	to match CSS conventions.</p>
    <dt data-md>"&lt;transform-list>"
    <dd data-md>
     <p>A list of valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-transforms-1/#typedef-transform-function" id="ref-for-typedef-transform-function①">&lt;transform-function></a> values. Note that <code>"&lt;transform-list>"</code> is a <a data-link-type="dfn" href="#pre-multiplied-data-type-name" id="ref-for-pre-multiplied-data-type-name">pre-multiplied data type name</a> equivalent to <code>"&lt;transform-function>+"</code></p>
   </dl>
   <p class="note" role="note"><span>Note:</span> A syntax string of <code>"*"</code> will produce the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition⑦">universal syntax definition</a>, which is not a <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component②">syntax component</a>.
	Therefore, <code>"*"</code> may not be <a href="#multipliers">multiplied</a> or <a href="#combinator">combined</a> with anything else.</p>
   <h3 class="heading settled" data-level="5.2" id="multipliers"><span class="secno">5.2. </span><span class="content">The '+' and '#' Multipliers</span><a class="self-link" href="#multipliers"></a></h3>
   <p>Any <a data-link-type="dfn" href="#syntax-component-name" id="ref-for-syntax-component-name①">syntax component name</a> except <a data-link-type="dfn" href="#pre-multiplied-data-type-name" id="ref-for-pre-multiplied-data-type-name①">pre-multiplied data type names</a> may be immediately followed by a multiplier:</p>
   <dl>
    <dt data-md>U+002B PLUS SIGN (+)
    <dd data-md>
     <p>Indicates a space-separated list.</p>
    <dt data-md>U+0023 NUMBER SIGN (#)
    <dd data-md>
     <p>Indicates a comma-separated list.</p>
   </dl>
   <div class="example" id="example-505ad8d9">
    <a class="self-link" href="#example-505ad8d9"></a> 
    <dl>
     <dt data-md><code>"&lt;length>+"</code>
     <dd data-md>
      <p>accepts a space-separated list of length values</p>
     <dt data-md><code>"&lt;color>#"</code>
     <dd data-md>
      <p>accepts a comma-separated list of color values</p>
    </dl>
   </div>
   <p class="note" role="note"><span>Note:</span> The multiplier must appear immediately after the <a data-link-type="dfn" href="#syntax-component-name" id="ref-for-syntax-component-name②">syntax component name</a> being multiplied.</p>
   <h3 class="heading settled" data-level="5.3" id="combinator"><span class="secno">5.3. </span><span class="content">The '|' Combinator</span><a class="self-link" href="#combinator"></a></h3>
   <p><a data-link-type="dfn" href="#syntax-string" id="ref-for-syntax-string②">Syntax strings</a> may use U+007C VERTICAL LINE (|) to provide multiple <a data-link-type="dfn" href="#syntax-component-name" id="ref-for-syntax-component-name③">syntax component names</a>. Such syntax strings will result in a <a data-link-type="dfn" href="#syntax-definition" id="ref-for-syntax-definition④">syntax definition</a> with multiple <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component③">syntax components</a>.</p>
   <p>When a <a data-link-type="dfn" href="#syntax-definition" id="ref-for-syntax-definition⑤">syntax definition</a> with multiple <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component④">syntax components</a> is used
to parse a CSS value, the syntax components are matched in the order specified.</p>
   <p class="note" role="note"><span>Note:</span> That is, given the syntax string <code>"red | &lt;color>"</code>,
matching the value <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-red" id="ref-for-valdef-color-red③">red</a> against it will parse as an identifier,
while matching the value <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-blue" id="ref-for-valdef-color-blue">blue</a> will parse as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-3/#valuea-def-color" id="ref-for-valuea-def-color①" title="Expands to: indigo | gold | firebrick | indianred | yellow | darkolivegreen | darkseagreen | slategrey | darkslategrey | mediumvioletred | mediumorchid | transparent | chartreuse | mediumslateblue | black | springgreen | crimson | lightsalmon | brown | turquoise | olivedrab | cyan | silver | skyblue | gray | darkturquoise | goldenrod | darkgreen | darkviolet | darkgray | lightpink | teal | darkmagenta | lightgoldenrodyellow | lavender | yellowgreen | thistle | violet | navy | dimgrey | orchid | blue | ghostwhite | honeydew | cornflowerblue | darkblue | darkkhaki | mediumpurple | cornsilk | red | bisque | slategray | darkcyan | khaki | wheat | deepskyblue | rebeccapurple | darkred | steelblue | aliceblue | lightslategrey | gainsboro | mediumturquoise | floralwhite | coral | purple | lightgrey | lightcyan | darksalmon | beige | azure | lightsteelblue | oldlace | greenyellow | royalblue | lightseagreen | mistyrose | sienna | lightcoral | orangered | navajowhite | lime | palegreen | burlywood | seashell | mediumspringgreen | fuchsia | papayawhip | blanchedalmond | peru | aquamarine | white | darkslategray | tomato | ivory | dodgerblue | currentcolor | lemonchiffon | chocolate | orange | forestgreen | darkgrey | olive | mintcream | antiquewhite | darkorange | cadetblue | moccasin | limegreen | saddlebrown | grey | darkslateblue | lightskyblue | deeppink | plum | aqua | darkgoldenrod | maroon | sandybrown | magenta | tan | rosybrown | pink | lightblue | palevioletred | mediumseagreen | slateblue | dimgray | powderblue | seagreen | snow | mediumblue | midnightblue | paleturquoise | palegoldenrod | whitesmoke | darkorchid | salmon | lightslategray | lawngreen | lightgreen | lightgray | hotpink | lightyellow | lavenderblush | linen | mediumaquamarine | green | blueviolet | peachpuff">&lt;color></a>.</p>
   <div class="example" id="example-0a8e6183">
    <a class="self-link" href="#example-0a8e6183"></a> 
    <dl>
     <dt data-md><code>"&lt;length> | auto"</code>
     <dd data-md>
      <p>accepts a length, or auto</p>
     <dt data-md><code>"foo | &lt;color># | &lt;integer>"</code>
     <dd data-md>
      <p>accepts foo, a comma-separated list of color values, or a single integer</p>
    </dl>
   </div>
   <h3 class="heading settled" data-level="5.4" id="parsing-syntax"><span class="secno">5.4. </span><span class="content">Parsing The Syntax String</span><a class="self-link" href="#parsing-syntax"></a></h3>
   <h4 class="heading settled" data-level="5.4.1" id="parsing-definitions"><span class="secno">5.4.1. </span><span class="content">Definitions</span><a class="self-link" href="#parsing-definitions"></a></h4>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="data-type-name">data type name</dfn>
    <dd data-md>
     <p>A sequence of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point">code points</a> consisting of a U+003C LESS-THAN SIGN (&lt;), followed be zero or more <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#name-code-point" id="ref-for-name-code-point">name code points</a>, and terminated by U+003E GREATER-THAN SIGN (>).</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pre-multiplied-data-type-name">pre-multiplied data type name</dfn>
    <dd data-md>
     <p>A <a data-link-type="dfn" href="#data-type-name" id="ref-for-data-type-name">data type name</a> that represents another <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component⑤">syntax component</a> with a <a href="#multipliers">multiplier</a> already included.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="syntax-component">syntax component</dfn>
    <dd data-md>
     <p>An object consisting of a <a data-link-type="dfn" href="#syntax-component-name" id="ref-for-syntax-component-name④">syntax component name</a>, and an optional <a href="#multipliers">multiplier</a>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="syntax-component-name">syntax component name</dfn>
    <dd data-md>
     <p>A sequence of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point①">code points</a> which is either a <a data-link-type="dfn" href="#data-type-name" id="ref-for-data-type-name①">data type name</a>,
or a sequence that can produce a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value③">&lt;custom-ident></a>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="syntax-definition">syntax definition</dfn>
    <dd data-md>
     <p>An object consisting of a list of <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component⑥">syntax components</a>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="universal-syntax-definition">universal syntax definition</dfn>
    <dd data-md>
     <p>A special syntax definition which accepts any valid token stream.</p>
   </dl>
   <h4 class="heading settled" data-level="5.4.2" id="consume-syntax-definition"><span class="secno">5.4.2. </span><span class="content">Consume a Syntax Definition</span><a class="self-link" href="#consume-syntax-definition"></a></h4>
   <div class="algorithm" data-algorithm="consume a syntax definition">
     This section describes how to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="consume-a-syntax-definition">consume a syntax definition</dfn> from a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string①">string</a> <var>string</var>.
	It either produces a <a data-link-type="dfn" href="#syntax-definition" id="ref-for-syntax-definition⑥">syntax definition</a> with a list of <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component⑦">syntax components</a>, or the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition⑧">universal syntax definition</a>. 
    <ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace" id="ref-for-strip-leading-and-trailing-ascii-whitespace">Strip leading and trailing ASCII whitespace</a> from <var>string</var>.</p>
     <li data-md>
      <p>If <var>string</var>’s <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string-length" id="ref-for-string-length">length</a> is 0,
return failure.</p>
     <li data-md>
      <p>If <var>string</var>’s <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string-length" id="ref-for-string-length①">length</a> is 1,
and the only <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point②">code point</a> in <var>string</var> is U+002A ASTERISK (*),
return the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition⑨">universal syntax definition</a>.</p>
     <li data-md>
      <p>Let <var>stream</var> be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#input-stream" id="ref-for-input-stream">input stream</a> created from the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point③">code points</a> of <var>string</var>,
preprocessed as specified in <a data-link-type="biblio" href="#biblio-css-syntax-3">[css-syntax-3]</a>.
Let <var>definition</var> be an initially empty <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a> of <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component⑧">syntax components</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="#consume-a-syntax-component" id="ref-for-consume-a-syntax-component">Consume a syntax component</a> from <var>stream</var>.
If failure was returned,
return failure;
otherwise, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append">append</a> the returned value to <var>definition</var>.</p>
      <p>Consume as much <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#whitespace" id="ref-for-whitespace">whitespace</a> as possible from <var>stream</var>.</p>
      <p>Consume the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#next-input-code-point" id="ref-for-next-input-code-point">next input code point</a> in <var>stream</var>:</p>
      <dl>
       <dt data-md>EOF
       <dd data-md>
        <p>return <var>definition</var>.</p>
       <dt data-md>U+007C VERTICAL LINE (|)
       <dd data-md>
        <p>Repeat step 5.</p>
       <dt data-md>Anything else:
       <dd data-md>
        <p>Return failure.</p>
      </dl>
    </ol>
   </div>
   <h4 class="heading settled" data-level="5.4.3" id="consume-syntax-component"><span class="secno">5.4.3. </span><span class="content">Consume a Syntax Component</span><a class="self-link" href="#consume-syntax-component"></a></h4>
   <div class="algorithm" data-algorithm="consume a syntax component">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="consume-a-syntax-component">consume a syntax component</dfn> from a stream of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point④">code points</a> <var>stream</var>: 
    <p>Consume as much <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#whitespace" id="ref-for-whitespace①">whitespace</a> as possible from <var>stream</var>.</p>
    <p>Let <var>component</var> be a new <a data-link-type="dfn" href="#syntax-component" id="ref-for-syntax-component⑨">syntax component</a> with its <var>name</var> and <var>multiplier</var> initially
	empty.</p>
    <p>Consume the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#next-input-code-point" id="ref-for-next-input-code-point①">next input code point</a> in <var>stream</var>:</p>
    <dl>
     <dt data-md>U+003C LESS-THAN SIGN (&lt;)
     <dd data-md>
      <p><a data-link-type="dfn" href="#consume-a-data-type-name" id="ref-for-consume-a-data-type-name">Consume a data type name</a> from <var>stream</var>.
If it returned a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string②">string</a>, set <var>component</var>’s <var>name</var> to the returned value.
Otherwise, return failure.</p>
     <dt data-md><a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#name-start-code-point" id="ref-for-name-start-code-point">name-start code point</a>
     <dt data-md>U+005C REVERSE SOLIDUS (\)
     <dd data-md>
      <p>If the stream <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#check-if-three-code-points-would-start-an-identifier" id="ref-for-check-if-three-code-points-would-start-an-identifier">starts with an identifier</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#reconsume-the-current-input-code-point" id="ref-for-reconsume-the-current-input-code-point">reconsume the current input code point</a> from <var>stream</var> then <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#consume-a-name" id="ref-for-consume-a-name">consume a name</a> from <var>stream</var>,
and set <var>component</var>’s <var>name</var> to the returned value.
Otherwise return failure.</p>
      <p>If <var>component</var>’s <var>name</var> does not <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar④">parse</a> as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value④">&lt;custom-ident></a>,
return failure.</p>
     <dt data-md>anything else
     <dd data-md>
      <p>Return failure.</p>
    </dl>
    <p>If <var>component</var>’s <var>name</var> is a <a data-link-type="dfn" href="#pre-multiplied-data-type-name" id="ref-for-pre-multiplied-data-type-name②">pre-multiplied data type name</a>,
	return <var>component</var>.</p>
    <p>If the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#next-input-code-point" id="ref-for-next-input-code-point②">next input code point</a> in <var>stream</var> is U+002B PLUS SIGN (+)
	or U+0023 NUMBER SIGN (#),
	consume the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#next-input-code-point" id="ref-for-next-input-code-point③">next input code point</a> from <var>stream</var>,
	and set <var>component</var>’s <var>multiplier</var> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#current-input-code-point" id="ref-for-current-input-code-point">current input code point</a>.</p>
    <p>Return <var>component</var>.</p>
   </div>
   <h4 class="heading settled" data-level="5.4.4" id="consume-data-type-name"><span class="secno">5.4.4. </span><span class="content">Consume a Data Type Name</span><a class="self-link" href="#consume-data-type-name"></a></h4>
   <div class="algorithm" data-algorithm="consume a data type name">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="consume-a-data-type-name">consume a data type name</dfn> from a stream of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point⑤">code points</a>: 
    <p class="note" role="note"><span>Note:</span> This algorithm assumes that a U+003C LESS-THAN SIGN (&lt;) <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point⑥">code point</a> has already been consumed from the stream.</p>
    <p>Let <var>name</var> initially be a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string③">string</a> containing a single U+003C LESS-THAN SIGN (&lt;) <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point⑦">code point</a>.</p>
    <p>Repeatedly consume the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#next-input-code-point" id="ref-for-next-input-code-point④">next input code point</a>:</p>
    <dl>
     <dt data-md>U+003E GREATER-THAN SIGN (>)
     <dd data-md>
      <p>Append the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point⑧">code point</a> to <var>name</var>.
If <var>name</var> is a <a data-link-type="dfn" href="#css-supported-syntax-component-name" id="ref-for-css-supported-syntax-component-name">supported syntax component name</a>,
return <var>name</var>.
Otherwise return failure.</p>
     <dt data-md><a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#name-code-point" id="ref-for-name-code-point①">name code point</a>
     <dd data-md>
      <p>Append the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point⑨">code point</a> to <var>name</var>.</p>
     <dt data-md>anything else
     <dd data-md>
      <p>Return failure.</p>
    </dl>
   </div>
   <h2 class="heading settled" data-level="6" id="cssom"><span class="secno">6. </span><span class="content">CSSOM</span><a class="self-link" href="#cssom"></a></h2>
   <div class="note" role="note"> The value specified for a registered custom property is not
	interpreted until computed-value time. This means that only APIs that
	retrieve computed values are affected. Other APIs must ignore the <code class="idl"><a data-link-type="idl" href="#dom-window-registeredpropertyset-slot" id="ref-for-dom-window-registeredpropertyset-slot③">[[registeredPropertySet]]</a></code> slot of the associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code>, and
	treat all custom properties as unregistered. </div>
   <h3 class="heading settled" data-level="6.1" id="extensions-to-css-rule-interface"><span class="secno">6.1. </span><span class="content">Extensions to the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssrule" id="ref-for-cssrule">CSSRule</a></code> Interface</span><a class="self-link" href="#extensions-to-css-rule-interface"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssrule" id="ref-for-cssrule①">CSSRule</a></code> interface is extended as follows:</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/cssom-1/#cssrule" id="ref-for-cssrule②"><c- g>CSSRule</c-></a> {
    <c- b>const</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short"><c- b>unsigned</c-> <c- b>short</c-></a> <dfn class="idl-code" data-dfn-for="CSSRule" data-dfn-type="const" data-export id="dom-cssrule-property_rule"><code><c- g>PROPERTY_RULE</c-></code><a class="self-link" href="#dom-cssrule-property_rule"></a></dfn> = 18;
};
</pre>
   <h3 class="heading settled" data-level="6.2" id="the-css-property-rule-interface"><span class="secno">6.2. </span><span class="content">The <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="csspropertyrule"><code>CSSPropertyRule</code></dfn> Interface</span><a class="self-link" href="#the-css-property-rule-interface"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#csspropertyrule" id="ref-for-csspropertyrule">CSSPropertyRule</a></code> interface represents an <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②⑤">@property</a> rule.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#csspropertyrule" id="ref-for-csspropertyrule①"><c- g>CSSPropertyRule</c-></a> : <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssrule" id="ref-for-cssrule③"><c- n>CSSRule</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-csspropertyrule-name" id="ref-for-dom-csspropertyrule-name"><c- g>name</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring①"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-csspropertyrule-syntax" id="ref-for-dom-csspropertyrule-syntax"><c- g>syntax</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-csspropertyrule-inherits" id="ref-for-dom-csspropertyrule-inherits"><c- g>inherits</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring②"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString?" href="#dom-csspropertyrule-initialvalue" id="ref-for-dom-csspropertyrule-initialvalue"><c- g>initialValue</c-></a>;
};
</pre>
   <dl>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="CSSPropertyRule" data-dfn-type="attribute" data-export id="dom-csspropertyrule-name"><code>name</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring③">CSSOMString</a>, readonly</span>
    <dd> The custom property name associated with the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②⑥">@property</a> rule. 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="CSSPropertyRule" data-dfn-type="attribute" data-export id="dom-csspropertyrule-syntax"><code>syntax</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring④">CSSOMString</a>, readonly</span>
    <dd> The syntax associated with the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②⑦">@property</a>, exactly as specified. 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="CSSPropertyRule" data-dfn-type="attribute" data-export id="dom-csspropertyrule-inherits"><code>inherits</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③">boolean</a>, readonly</span>
    <dd> The inherits descriptor associated with the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②⑧">@property</a> rule. 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="CSSPropertyRule" data-dfn-type="attribute" data-export id="dom-csspropertyrule-initialvalue"><code>initialValue</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring⑤">CSSOMString</a>, readonly, nullable</span>
    <dd> The initial value associated with the <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property②⑨">@property</a> rule,
		which may not be present. 
   </dl>
   <h3 class="heading settled" data-level="6.3" id="css-style-value-reification"><span class="secno">6.3. </span><span class="content"><code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue" id="ref-for-cssstylevalue">CSSStyleValue</a></code> Reification</span><a class="self-link" href="#css-style-value-reification"></a></h3>
   <div class="algorithm" data-algorithm="reify a registered custom property value">
     To <dfn data-dfn-type="dfn" data-export id="reify-a-registered-custom-property-value">reify a registered custom property value<a class="self-link" href="#reify-a-registered-custom-property-value"></a></dfn> given a property <var>property</var> and <a data-link-type="dfn" href="#syntax-definition" id="ref-for-syntax-definition⑦">syntax definition</a> <var>syntax</var>, run these steps: 
    <p>For specified values, <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#reify-a-list-of-component-values" id="ref-for-reify-a-list-of-component-values">reify a list of component values</a> from the value,
	and return the result.</p>
    <p>For computed values:</p>
    <ol>
     <li data-md>
      <p>If the value is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value⑤" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a>, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value①">&lt;integer></a>, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" id="ref-for-number-value①">&lt;number></a>, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value①" title="Expands to: turn | rad | grad | deg">&lt;angle></a>, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#time-value" id="ref-for-time-value①" title="Expands to: s | ms">&lt;time></a>, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#resolution-value" id="ref-for-resolution-value①" title="Expands to: dppx | x | dpcm | dpi">&lt;resolution></a>, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value③">&lt;percentage></a> or <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①">&lt;length-percentage></a>; <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#reify-a-numeric-value" id="ref-for-reify-a-numeric-value">reify a numeric value</a> from the value and return the result.</p>
     <li data-md>
      <p>If the value is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-transforms-1/#typedef-transform-function" id="ref-for-typedef-transform-function②">&lt;transform-function></a>, <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#reify-a-transform-function" id="ref-for-reify-a-transform-function">reify a &lt;transform-function></a> from the value and return the
result.</p>
     <li data-md>
      <p>If the value is a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-transforms-1/#typedef-transform-list" id="ref-for-typedef-transform-list">&lt;transform-list></a>, <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#reify-a-transform-list" id="ref-for-reify-a-transform-list">reify a &lt;transform-list></a> from the value and return the result.</p>
     <li data-md>
      <p>If the value is an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image①">&lt;image></a>, reify a CSSImageValue from the value and
return the result.</p>
     <li data-md>
      <p>If the value is an <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-identifier" id="ref-for-css-identifier">identifier</a>, <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#reify-an-identifier" id="ref-for-reify-an-identifier">reify an identifier</a> from the value
and return the result.</p>
     <li data-md>
      <p>If <var>syntax</var> is the <a data-link-type="dfn" href="#universal-syntax-definition" id="ref-for-universal-syntax-definition①⓪">universal syntax definition</a>, <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#reify-a-list-of-component-values" id="ref-for-reify-a-list-of-component-values①">reify a list of component values</a> from the value, and return the
result.</p>
     <li data-md>
      <p>Otherwise, <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#reify-as-a-cssstylevalue" id="ref-for-reify-as-a-cssstylevalue">reify as a CSSStyleValue</a> with the <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-cssstylevalue-associatedproperty-slot" id="ref-for-dom-cssstylevalue-associatedproperty-slot">[[associatedProperty]]</a></code> internal slot set to <var>property</var>, and
return the result.</p>
    </ol>
   </div>
   <h2 class="heading settled" data-level="7" id="examples"><span class="secno">7. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <h3 class="heading settled" data-level="7.1" id="example-1"><span class="secno">7.1. </span><span class="content">Example 1: Using custom properties to add animation behavior</span><a class="self-link" href="#example-1"></a></h3>
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>script</c-><c- p>></c->
CSS<c- p>.</c->registerProperty<c- p>({</c->
  name<c- o>:</c-> <c- u>"--stop-color"</c-><c- p>,</c->
  syntax<c- o>:</c-> <c- u>"&lt;color>"</c-><c- p>,</c->
  inherits<c- o>:</c-> <c- kc>false</c-><c- p>,</c->
  initialValue<c- o>:</c-> <c- u>"rgba(0,0,0,0)"</c->
<c- p>});</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->

<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- p>.</c-><c- nc>button</c-> <c- p>{</c->
  --<c- n>stop-color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c->
  <c- k>background</c-><c- p>:</c-> linear-gradient<c- p>(</c-><c- nf>var</c-><c- p>(</c-><c- o>--</c-><c- n>stop</c-><c- o>-</c-><c- kc>color</c-><c- p>),</c-> <c- kc>black</c-><c- p>);</c->
  <c- k>transition</c-><c- p>:</c-> <c- o>--</c-><c- n>stop-color</c-> <c- mi>1</c-><c- b>s</c-><c- p>;</c->
<c- p>}</c->

<c- p>.</c-><c- nc>button</c-><c- p>:</c-><c- nd>hover</c-> <c- p>{</c->
  --<c- n>stop-color</c-><c- p>:</c-> <c- kc>green</c-><c- p>;</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
</pre>
   <h3 class="heading settled" data-level="7.2" id="example-2"><span class="secno">7.2. </span><span class="content">Example 2: Using <a class="css" data-link-type="maybe" href="#at-ruledef-property" id="ref-for-at-ruledef-property③⓪">@property</a> to register a property</span><a class="self-link" href="#example-2"></a></h3>
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>script</c-><c- p>></c->
  CSS<c- p>.</c->paintWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'circle.js'</c-><c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
<c- p>&lt;</c-><c- f>style</c-><c- p>></c->
  <c- p>@</c-><c- k>property</c-> <c- f>--radius</c-> <c- p>{</c->
    <c- f>syntax</c-><c- o>:</c-> <c- u>"&lt;length>"</c-><c- o>;</c->
    <c- f>inherits</c-><c- o>:</c-> <c- f>false</c-><c- o>;</c->
    <c- f>initial-value</c-><c- o>:</c-> <c- f>0px</c-><c- o>;</c->
  <c- p>}</c->

  <c- f>div</c-> <c- p>{</c->
    <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
    <c- k>height</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
    --<c- n>radius</c-><c- p>:</c-> <c- mi>10</c-><c- b>px</c-><c- p>;</c->
    <c- k>background</c-><c- p>:</c-> <c- nf>paint</c-><c- p>(</c-><c- kc>circle</c-><c- p>);</c->
    <c- k>transition</c-><c- p>:</c-> <c- o>--</c-><c- n>radius</c-> <c- mi>1</c-><c- b>s</c-><c- p>;</c->
  <c- p>}</c->

  <c- f>div</c-><c- p>:</c-><c- nd>hover</c-> <c- p>{</c->
    --<c- n>radius</c-><c- p>:</c-> <c- mi>50</c-><c- b>px</c-><c- p>;</c->
  <c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight"><c- c1>// circle.js</c->
registerPaint<c- p>(</c-><c- t>'circle'</c-><c- p>,</c-> <c- kr>class</c-> <c- p>{</c->
    <c- kr>static</c-> get inputProperties<c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- p>[</c-><c- t>'--radius'</c-><c- p>];</c-> <c- p>}</c->
    paint<c- p>(</c->ctx<c- p>,</c-> geom<c- p>,</c-> properties<c- p>)</c-> <c- p>{</c->
      <c- a>let</c-> radius <c- o>=</c-> properties<c- p>.</c->get<c- p>(</c-><c- t>'--radius'</c-><c- p>).</c->value<c- p>;</c->
      ctx<c- p>.</c->fillStyle <c- o>=</c-> <c- t>'black'</c-><c- p>;</c->
      ctx<c- p>.</c->beginPath<c- p>();</c->
      ctx<c- p>.</c->arc<c- p>(</c->geom<c- p>.</c->width <c- o>/</c-> <c- mi>2</c-><c- p>,</c-> geom<c- p>.</c->height <c- o>/</c-> <c- mi>2</c-><c- p>,</c-> radius<c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>2</c-> <c- o>*</c-> Math<c- p>.</c->PI<c- p>);</c->
      ctx<c- p>.</c->fill<c- p>();</c->
    <c- p>}</c->
<c- p>});</c->
</pre>
   <h2 class="heading settled" data-level="8" id="security-considerations"><span class="secno">8. </span><span class="content">Security Considerations</span><a class="self-link" href="#security-considerations"></a></h2>
   <p>There are no known security issues introduced by these features.</p>
   <h2 class="heading settled" data-level="9" id="privacy-considerations"><span class="secno">9. </span><span class="content">Privacy Considerations</span><a class="self-link" href="#privacy-considerations"></a></h2>
   <p>There are no known privacy issues introduced by these features.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
  <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
  <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec. </p>
  <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#computationally-independent">computationally independent</a><span>, in §4.1</span>
   <li><a href="#consume-a-data-type-name">consume a data type name</a><span>, in §5.4.4</span>
   <li><a href="#consume-a-syntax-component">consume a syntax component</a><span>, in §5.4.3</span>
   <li><a href="#consume-a-syntax-definition">consume a syntax definition</a><span>, in §5.4.2</span>
   <li><a href="#csspropertyrule">CSSPropertyRule</a><span>, in §6.2</span>
   <li><a href="#custom-property-registration">custom property registration</a><span>, in §2.1</span>
   <li><a href="#data-type-name">data type name</a><span>, in §5.4.1</span>
   <li><a href="#equivalent-token-sequence">equivalent token sequence</a><span>, in §2.7</span>
   <li>
    inherits
    <ul>
     <li><a href="#dom-csspropertyrule-inherits">attribute for CSSPropertyRule</a><span>, in §6.2</span>
     <li><a href="#descdef-property-inherits">descriptor for @property</a><span>, in §3.2</span>
     <li><a href="#dom-propertydefinition-inherits">dict-member for PropertyDefinition</a><span>, in §4.2</span>
    </ul>
   <li>
    initialValue
    <ul>
     <li><a href="#dom-csspropertyrule-initialvalue">attribute for CSSPropertyRule</a><span>, in §6.2</span>
     <li><a href="#dom-propertydefinition-initialvalue">dict-member for PropertyDefinition</a><span>, in §4.2</span>
    </ul>
   <li><a href="#descdef-property-initial-value">initial-value</a><span>, in §3.3</span>
   <li>
    name
    <ul>
     <li><a href="#dom-csspropertyrule-name">attribute for CSSPropertyRule</a><span>, in §6.2</span>
     <li><a href="#dom-propertydefinition-name">dict-member for PropertyDefinition</a><span>, in §4.2</span>
    </ul>
   <li><a href="#pre-multiplied-data-type-name">pre-multiplied data type name</a><span>, in §5.4.1</span>
   <li><a href="#at-ruledef-property">@property</a><span>, in §3</span>
   <li><a href="#dictdef-propertydefinition">PropertyDefinition</a><span>, in §4.2</span>
   <li><a href="#dom-cssrule-property_rule">PROPERTY_RULE</a><span>, in §6.1</span>
   <li><a href="#register-a-custom-property">register a custom property</a><span>, in §4.1</span>
   <li><a href="#registered-custom-property">registered</a><span>, in §2</span>
   <li><a href="#registered-custom-property">registered custom property</a><span>, in §2</span>
   <li><a href="#dom-window-registeredpropertyset-slot">[[registeredPropertySet]]</a><span>, in §4</span>
   <li><a href="#dom-css-registerproperty">registerProperty(definition)</a><span>, in §4.1</span>
   <li><a href="#custom-property-registration">registration</a><span>, in §2.1</span>
   <li><a href="#reify-a-registered-custom-property-value">reify a registered custom property value</a><span>, in §6.3</span>
   <li><a href="#css-supported-syntax-component-name">supported syntax component name</a><span>, in §5.1</span>
   <li>
    syntax
    <ul>
     <li><a href="#dom-csspropertyrule-syntax">attribute for CSSPropertyRule</a><span>, in §6.2</span>
     <li><a href="#descdef-property-syntax">descriptor for @property</a><span>, in §3.1</span>
     <li><a href="#dom-propertydefinition-syntax">dict-member for PropertyDefinition</a><span>, in §4.2</span>
    </ul>
   <li><a href="#syntax-component">syntax component</a><span>, in §5.4.1</span>
   <li><a href="#syntax-component-name">syntax component name</a><span>, in §5.4.1</span>
   <li><a href="#syntax-definition">syntax definition</a><span>, in §5.4.1</span>
   <li><a href="#syntax-string">syntax string</a><span>, in §5</span>
   <li><a href="#universal-syntax-definition">universal syntax definition</a><span>, in §5.4.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-cascade">
   <a href="https://drafts.csswg.org/css-cascade-4/#cascade">https://drafts.csswg.org/css-cascade-4/#cascade</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascade">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">2.4. Computed Value-Time Behavior</a> <a href="#ref-for-computed-value①">(2)</a> <a href="#ref-for-computed-value②">(3)</a> <a href="#ref-for-computed-value③">(4)</a> <a href="#ref-for-computed-value④">(5)</a>
    <li><a href="#ref-for-computed-value⑤">2.6. Conditional Rules</a>
    <li><a href="#ref-for-computed-value⑥">3.1. The syntax Descriptor</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-all-inherit">
   <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-inherit">2.3. Specified Value-Time Behavior</a>
    <li><a href="#ref-for-valdef-all-inherit①">4.1. The registerProperty() Function</a> <a href="#ref-for-valdef-all-inherit②">(2)</a> <a href="#ref-for-valdef-all-inherit③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-initial-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#initial-value">https://drafts.csswg.org/css-cascade-4/#initial-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initial-value">3.3. The initial-value Descriptor</a> <a href="#ref-for-initial-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-all-revert">
   <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-revert">https://drafts.csswg.org/css-cascade-4/#valdef-all-revert</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-revert">2.3. Specified Value-Time Behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-specified-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#specified-value">https://drafts.csswg.org/css-cascade-4/#specified-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-specified-value">2.3. Specified Value-Time Behavior</a>
    <li><a href="#ref-for-specified-value①">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-all-unset">
   <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-unset">https://drafts.csswg.org/css-cascade-4/#valdef-all-unset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-unset">2.7.2. Dependency Cycles via Relative Units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valuea-def-color">
   <a href="https://drafts.csswg.org/css-color-3/#valuea-def-color">https://drafts.csswg.org/css-color-3/#valuea-def-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valuea-def-color">5.1. Supported Names</a>
    <li><a href="#ref-for-valuea-def-color①">5.3. The '|' Combinator</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-color-black">
   <a href="https://drafts.csswg.org/css-color-4/#valdef-color-black">https://drafts.csswg.org/css-color-4/#valdef-color-black</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-black">4.1. The registerProperty() Function</a> <a href="#ref-for-valdef-color-black①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-color-blue">
   <a href="https://drafts.csswg.org/css-color-4/#valdef-color-blue">https://drafts.csswg.org/css-color-4/#valdef-color-blue</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-blue">5.3. The '|' Combinator</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-color">
   <a href="https://drafts.csswg.org/css-color-4/#propdef-color">https://drafts.csswg.org/css-color-4/#propdef-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-color">4.1. The registerProperty() Function</a> <a href="#ref-for-propdef-color①">(2)</a> <a href="#ref-for-propdef-color②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-color-red">
   <a href="https://drafts.csswg.org/css-color-4/#valdef-color-red">https://drafts.csswg.org/css-color-4/#valdef-color-red</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-red">5.1. Supported Names</a> <a href="#ref-for-valdef-color-red①">(2)</a> <a href="#ref-for-valdef-color-red②">(3)</a>
    <li><a href="#ref-for-valdef-color-red③">5.3. The '|' Combinator</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-resolve-color-values">
   <a href="https://drafts.csswg.org/css-color-4/#resolve-color-values">https://drafts.csswg.org/css-color-4/#resolve-color-values</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resolve-color-values">2.4. Computed Value-Time Behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-at-ruledef-supports">
   <a href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports">https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-ruledef-supports">2.6. Conditional Rules</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-size">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size">https://drafts.csswg.org/css-fonts-3/#propdef-font-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-size">2.7.2. Dependency Cycles via Relative Units</a>
    <li><a href="#ref-for-propdef-font-size①">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-declaration-list">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list">https://drafts.csswg.org/css-syntax-3/#typedef-declaration-list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-declaration-list">3. The @property Rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-declaration-value">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value">https://drafts.csswg.org/css-syntax-3/#typedef-declaration-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-declaration-value">3.3. The initial-value Descriptor</a>
    <li><a href="#ref-for-typedef-declaration-value①">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-dimension-token">
   <a href="https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token">https://drafts.csswg.org/css-syntax-3/#typedef-dimension-token</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-dimension-token">2.7. Substitution via var()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-consume-a-name">
   <a href="https://drafts.csswg.org/css-syntax-3/#consume-a-name">https://drafts.csswg.org/css-syntax-3/#consume-a-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-consume-a-name">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-input-code-point">
   <a href="https://drafts.csswg.org/css-syntax-3/#current-input-code-point">https://drafts.csswg.org/css-syntax-3/#current-input-code-point</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-input-code-point">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-input-stream">
   <a href="https://drafts.csswg.org/css-syntax-3/#input-stream">https://drafts.csswg.org/css-syntax-3/#input-stream</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-input-stream">5.4.2. Consume a Syntax Definition</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-name-code-point">
   <a href="https://drafts.csswg.org/css-syntax-3/#name-code-point">https://drafts.csswg.org/css-syntax-3/#name-code-point</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-name-code-point">5.4.1. Definitions</a>
    <li><a href="#ref-for-name-code-point①">5.4.4. Consume a Data Type Name</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-name-start-code-point">
   <a href="https://drafts.csswg.org/css-syntax-3/#name-start-code-point">https://drafts.csswg.org/css-syntax-3/#name-start-code-point</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-name-start-code-point">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-next-input-code-point">
   <a href="https://drafts.csswg.org/css-syntax-3/#next-input-code-point">https://drafts.csswg.org/css-syntax-3/#next-input-code-point</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-next-input-code-point">5.4.2. Consume a Syntax Definition</a>
    <li><a href="#ref-for-next-input-code-point①">5.4.3. Consume a Syntax Component</a> <a href="#ref-for-next-input-code-point②">(2)</a> <a href="#ref-for-next-input-code-point③">(3)</a>
    <li><a href="#ref-for-next-input-code-point④">5.4.4. Consume a Data Type Name</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-parse-something-according-to-a-css-grammar">
   <a href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar">https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-parse-something-according-to-a-css-grammar">2.1. Determining the Registration</a>
    <li><a href="#ref-for-css-parse-something-according-to-a-css-grammar①">2.4. Computed Value-Time Behavior</a>
    <li><a href="#ref-for-css-parse-something-according-to-a-css-grammar②">4.1. The registerProperty() Function</a> <a href="#ref-for-css-parse-something-according-to-a-css-grammar③">(2)</a>
    <li><a href="#ref-for-css-parse-something-according-to-a-css-grammar④">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reconsume-the-current-input-code-point">
   <a href="https://drafts.csswg.org/css-syntax-3/#reconsume-the-current-input-code-point">https://drafts.csswg.org/css-syntax-3/#reconsume-the-current-input-code-point</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reconsume-the-current-input-code-point">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-check-if-three-code-points-would-start-an-identifier">
   <a href="https://drafts.csswg.org/css-syntax-3/#check-if-three-code-points-would-start-an-identifier">https://drafts.csswg.org/css-syntax-3/#check-if-three-code-points-would-start-an-identifier</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-check-if-three-code-points-would-start-an-identifier">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-whitespace">
   <a href="https://drafts.csswg.org/css-syntax-3/#whitespace">https://drafts.csswg.org/css-syntax-3/#whitespace</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-whitespace">5.4.2. Consume a Syntax Definition</a>
    <li><a href="#ref-for-whitespace①">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-transform-function">
   <a href="https://drafts.csswg.org/css-transforms-1/#typedef-transform-function">https://drafts.csswg.org/css-transforms-1/#typedef-transform-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-transform-function">5.1. Supported Names</a> <a href="#ref-for-typedef-transform-function①">(2)</a>
    <li><a href="#ref-for-typedef-transform-function②">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-transform-list">
   <a href="https://drafts.csswg.org/css-transforms-1/#typedef-transform-list">https://drafts.csswg.org/css-transforms-1/#typedef-transform-list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-transform-list">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-transform">
   <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">https://drafts.csswg.org/css-transforms-1/#propdef-transform</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-transform">2.5. Animation Behavior</a> <a href="#ref-for-propdef-transform①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssstylevalue">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue">https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssstylevalue">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-cssstylevalue-associatedproperty-slot">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#dom-cssstylevalue-associatedproperty-slot">https://drafts.css-houdini.org/css-typed-om-1/#dom-cssstylevalue-associatedproperty-slot</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-cssstylevalue-associatedproperty-slot">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-custom-property-name-string">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#custom-property-name-string">https://drafts.css-houdini.org/css-typed-om-1/#custom-property-name-string</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-property-name-string">2.1. Determining the Registration</a>
    <li><a href="#ref-for-custom-property-name-string①">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reify-a-transform-function">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#reify-a-transform-function">https://drafts.css-houdini.org/css-typed-om-1/#reify-a-transform-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reify-a-transform-function">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reify-a-transform-list">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#reify-a-transform-list">https://drafts.css-houdini.org/css-typed-om-1/#reify-a-transform-list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reify-a-transform-list">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reify-a-list-of-component-values">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#reify-a-list-of-component-values">https://drafts.css-houdini.org/css-typed-om-1/#reify-a-list-of-component-values</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reify-a-list-of-component-values">6.3. CSSStyleValue Reification</a> <a href="#ref-for-reify-a-list-of-component-values①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reify-a-numeric-value">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#reify-a-numeric-value">https://drafts.css-houdini.org/css-typed-om-1/#reify-a-numeric-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reify-a-numeric-value">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reify-an-identifier">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#reify-an-identifier">https://drafts.css-houdini.org/css-typed-om-1/#reify-an-identifier</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reify-an-identifier">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reify-as-a-cssstylevalue">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#reify-as-a-cssstylevalue">https://drafts.css-houdini.org/css-typed-om-1/#reify-as-a-cssstylevalue</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reify-as-a-cssstylevalue">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-identifier-value">
   <a href="https://drafts.csswg.org/css-values-4/#identifier-value">https://drafts.csswg.org/css-values-4/#identifier-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-identifier-value">5.1. Supported Names</a> <a href="#ref-for-identifier-value①">(2)</a> <a href="#ref-for-identifier-value②">(3)</a>
    <li><a href="#ref-for-identifier-value③">5.4.1. Definitions</a>
    <li><a href="#ref-for-identifier-value④">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-length-percentage">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">https://drafts.csswg.org/css-values-4/#typedef-length-percentage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-length-percentage">2.7.2. Dependency Cycles via Relative Units</a>
    <li><a href="#ref-for-typedef-length-percentage①">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-time-value">
   <a href="https://drafts.csswg.org/css-values-4/#time-value">https://drafts.csswg.org/css-values-4/#time-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-time-value">5.1. Supported Names</a>
    <li><a href="#ref-for-time-value①">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-calc">
   <a href="https://drafts.csswg.org/css-values-4/#funcdef-calc">https://drafts.csswg.org/css-values-4/#funcdef-calc</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-calc">5.1. Supported Names</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canonical-unit">
   <a href="https://drafts.csswg.org/css-values-4/#canonical-unit">https://drafts.csswg.org/css-values-4/#canonical-unit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canonical-unit">2.4. Computed Value-Time Behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cap">
   <a href="https://drafts.csswg.org/css-values-4/#cap">https://drafts.csswg.org/css-values-4/#cap</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cap">2.7.2. Dependency Cycles via Relative Units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ch">
   <a href="https://drafts.csswg.org/css-values-4/#ch">https://drafts.csswg.org/css-values-4/#ch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ch">2.7.2. Dependency Cycles via Relative Units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-wide-keywords">
   <a href="https://drafts.csswg.org/css-values-4/#css-wide-keywords">https://drafts.csswg.org/css-values-4/#css-wide-keywords</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-wide-keywords">2.3. Specified Value-Time Behavior</a>
    <li><a href="#ref-for-css-wide-keywords①">5. Syntax Strings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dimension">
   <a href="https://drafts.csswg.org/css-values-4/#dimension">https://drafts.csswg.org/css-values-4/#dimension</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dimension">2.4. Computed Value-Time Behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-em">
   <a href="https://drafts.csswg.org/css-values-4/#em">https://drafts.csswg.org/css-values-4/#em</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-em">2.7.2. Dependency Cycles via Relative Units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ex">
   <a href="https://drafts.csswg.org/css-values-4/#ex">https://drafts.csswg.org/css-values-4/#ex</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ex">2.7.2. Dependency Cycles via Relative Units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ic">
   <a href="https://drafts.csswg.org/css-values-4/#ic">https://drafts.csswg.org/css-values-4/#ic</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ic">2.7.2. Dependency Cycles via Relative Units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-identifier">
   <a href="https://drafts.csswg.org/css-values-4/#css-identifier">https://drafts.csswg.org/css-values-4/#css-identifier</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-identifier">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-interpolation">
   <a href="https://drafts.csswg.org/css-values-4/#interpolation">https://drafts.csswg.org/css-values-4/#interpolation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-interpolation">2.5. Animation Behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-lh">
   <a href="https://drafts.csswg.org/css-values-4/#lh">https://drafts.csswg.org/css-values-4/#lh</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-lh">2.7.2. Dependency Cycles via Relative Units</a> <a href="#ref-for-lh①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-math-function">
   <a href="https://drafts.csswg.org/css-values-4/#math-function">https://drafts.csswg.org/css-values-4/#math-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-math-function">2.4. Computed Value-Time Behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-rem">
   <a href="https://drafts.csswg.org/css-values-4/#rem">https://drafts.csswg.org/css-values-4/#rem</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rem">2.7.2. Dependency Cycles via Relative Units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-rlh">
   <a href="https://drafts.csswg.org/css-values-4/#rlh">https://drafts.csswg.org/css-values-4/#rlh</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rlh">2.7.2. Dependency Cycles via Relative Units</a> <a href="#ref-for-rlh①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">3.2. The inherits Descriptor</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-custom-property-name">
   <a href="https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name">https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-custom-property-name">3. The @property Rule</a> <a href="#ref-for-typedef-custom-property-name①">(2)</a> <a href="#ref-for-typedef-custom-property-name②">(3)</a> <a href="#ref-for-typedef-custom-property-name③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-custom-property">
   <a href="https://drafts.csswg.org/css-variables-1/#custom-property">https://drafts.csswg.org/css-variables-1/#custom-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-property">2. Registered Custom Properties</a> <a href="#ref-for-custom-property①">(2)</a> <a href="#ref-for-custom-property②">(3)</a>
    <li><a href="#ref-for-custom-property③">2.1. Determining the Registration</a> <a href="#ref-for-custom-property④">(2)</a> <a href="#ref-for-custom-property⑤">(3)</a>
    <li><a href="#ref-for-custom-property⑥">2.2. Parse-Time Behavior</a>
    <li><a href="#ref-for-custom-property⑦">2.3. Specified Value-Time Behavior</a>
    <li><a href="#ref-for-custom-property⑧">2.4. Computed Value-Time Behavior</a>
    <li><a href="#ref-for-custom-property⑨">2.6. Conditional Rules</a> <a href="#ref-for-custom-property①⓪">(2)</a> <a href="#ref-for-custom-property①①">(3)</a> <a href="#ref-for-custom-property①②">(4)</a>
    <li><a href="#ref-for-custom-property①③">2.7.2. Dependency Cycles via Relative Units</a>
    <li><a href="#ref-for-custom-property①④">4.1. The registerProperty() Function</a> <a href="#ref-for-custom-property①⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalid-at-computed-value-time">
   <a href="https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time">https://drafts.csswg.org/css-variables-1/#invalid-at-computed-value-time</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalid-at-computed-value-time">2.7.1. Fallbacks In var() References</a>
    <li><a href="#ref-for-invalid-at-computed-value-time①">4.1. The registerProperty() Function</a> <a href="#ref-for-invalid-at-computed-value-time②">(2)</a> <a href="#ref-for-invalid-at-computed-value-time③">(3)</a> <a href="#ref-for-invalid-at-computed-value-time④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-var">
   <a href="https://drafts.csswg.org/css-variables-1/#funcdef-var">https://drafts.csswg.org/css-variables-1/#funcdef-var</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-var">2.2. Parse-Time Behavior</a>
    <li><a href="#ref-for-funcdef-var①">2.7. Substitution via var()</a> <a href="#ref-for-funcdef-var②">(2)</a> <a href="#ref-for-funcdef-var③">(3)</a>
    <li><a href="#ref-for-funcdef-var④">2.7.1. Fallbacks In var() References</a> <a href="#ref-for-funcdef-var⑤">(2)</a>
    <li><a href="#ref-for-funcdef-var⑥">4.1. The registerProperty() Function</a> <a href="#ref-for-funcdef-var⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-line-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height">https://drafts.csswg.org/css2/visudet.html#propdef-line-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-line-height">2.7.2. Dependency Cycles via Relative Units</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-image">
   <a href="https://drafts.csswg.org/css-images-3/#typedef-image">https://drafts.csswg.org/css-images-3/#typedef-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-image">5.1. Supported Names</a>
    <li><a href="#ref-for-typedef-image①">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-angle-value">
   <a href="https://drafts.csswg.org/css-values-3/#angle-value">https://drafts.csswg.org/css-values-3/#angle-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-angle-value">5.1. Supported Names</a>
    <li><a href="#ref-for-angle-value①">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-integer-value">
   <a href="https://drafts.csswg.org/css-values-3/#integer-value">https://drafts.csswg.org/css-values-3/#integer-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-integer-value">5.1. Supported Names</a>
    <li><a href="#ref-for-integer-value①">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://drafts.csswg.org/css-values-3/#length-value">https://drafts.csswg.org/css-values-3/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">2.7. Substitution via var()</a>
    <li><a href="#ref-for-length-value①">2.7.2. Dependency Cycles via Relative Units</a>
    <li><a href="#ref-for-length-value②">5.1. Supported Names</a> <a href="#ref-for-length-value③">(2)</a> <a href="#ref-for-length-value④">(3)</a>
    <li><a href="#ref-for-length-value⑤">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-number-value">
   <a href="https://drafts.csswg.org/css-values-3/#number-value">https://drafts.csswg.org/css-values-3/#number-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-number-value">5.1. Supported Names</a>
    <li><a href="#ref-for-number-value①">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-percentage-value">
   <a href="https://drafts.csswg.org/css-values-3/#percentage-value">https://drafts.csswg.org/css-values-3/#percentage-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">5.1. Supported Names</a> <a href="#ref-for-percentage-value①">(2)</a> <a href="#ref-for-percentage-value②">(3)</a>
    <li><a href="#ref-for-percentage-value③">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-resolution-value">
   <a href="https://drafts.csswg.org/css-values-3/#resolution-value">https://drafts.csswg.org/css-values-3/#resolution-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resolution-value">5.1. Supported Names</a>
    <li><a href="#ref-for-resolution-value①">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string-value">
   <a href="https://drafts.csswg.org/css-values-3/#string-value">https://drafts.csswg.org/css-values-3/#string-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string-value">3.1. The syntax Descriptor</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-url-value">
   <a href="https://drafts.csswg.org/css-values-3/#url-value">https://drafts.csswg.org/css-values-3/#url-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url-value">2.4. Computed Value-Time Behavior</a>
    <li><a href="#ref-for-url-value①">5.1. Supported Names</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-namespacedef-css">
   <a href="https://drafts.csswg.org/cssom-1/#namespacedef-css">https://drafts.csswg.org/cssom-1/#namespacedef-css</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-namespacedef-css">4. Registering Custom Properties in JS</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssomstring">
   <a href="https://drafts.csswg.org/cssom-1/#cssomstring">https://drafts.csswg.org/cssom-1/#cssomstring</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssomstring">6.2. The CSSPropertyRule Interface</a> <a href="#ref-for-cssomstring①">(2)</a> <a href="#ref-for-cssomstring②">(3)</a> <a href="#ref-for-cssomstring③">(4)</a> <a href="#ref-for-cssomstring④">(5)</a> <a href="#ref-for-cssomstring⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cssrule">
   <a href="https://drafts.csswg.org/cssom-1/#cssrule">https://drafts.csswg.org/cssom-1/#cssrule</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssrule">6.1. Extensions to the CSSRule Interface</a> <a href="#ref-for-cssrule①">(2)</a> <a href="#ref-for-cssrule②">(3)</a>
    <li><a href="#ref-for-cssrule③">6.2. The CSSPropertyRule Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">2. Registered Custom Properties</a>
    <li><a href="#ref-for-document①">2.1. Determining the Registration</a> <a href="#ref-for-document②">(2)</a>
    <li><a href="#ref-for-document③">4. Registering Custom Properties in JS</a>
    <li><a href="#ref-for-document④">6. CSSOM</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-shadow-tree">
   <a href="https://dom.spec.whatwg.org/#concept-shadow-tree">https://dom.spec.whatwg.org/#concept-shadow-tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-shadow-tree">3. The @property Rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#concept-document-window">https://html.spec.whatwg.org/multipage/window-object.html#concept-document-window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-window">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-global-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object">https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-global-object">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-set-append">
   <a href="https://infra.spec.whatwg.org/#set-append">https://infra.spec.whatwg.org/#set-append</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-append">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ascii-case-insensitive">
   <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">https://infra.spec.whatwg.org/#ascii-case-insensitive</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ascii-case-insensitive">5.1. Supported Names</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-boolean">
   <a href="https://infra.spec.whatwg.org/#boolean">https://infra.spec.whatwg.org/#boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-boolean">2.1. Determining the Registration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-code-point">
   <a href="https://infra.spec.whatwg.org/#code-point">https://infra.spec.whatwg.org/#code-point</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-code-point">5.4.1. Definitions</a> <a href="#ref-for-code-point①">(2)</a>
    <li><a href="#ref-for-code-point②">5.4.2. Consume a Syntax Definition</a> <a href="#ref-for-code-point③">(2)</a>
    <li><a href="#ref-for-code-point④">5.4.3. Consume a Syntax Component</a>
    <li><a href="#ref-for-code-point⑤">5.4.4. Consume a Data Type Name</a> <a href="#ref-for-code-point⑥">(2)</a> <a href="#ref-for-code-point⑦">(3)</a> <a href="#ref-for-code-point⑧">(4)</a> <a href="#ref-for-code-point⑨">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-exists">
   <a href="https://infra.spec.whatwg.org/#map-exists">https://infra.spec.whatwg.org/#map-exists</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-exists">2. Registered Custom Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string-length">
   <a href="https://infra.spec.whatwg.org/#string-length">https://infra.spec.whatwg.org/#string-length</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string-length">5.4.2. Consume a Syntax Definition</a> <a href="#ref-for-string-length①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list">
   <a href="https://infra.spec.whatwg.org/#list">https://infra.spec.whatwg.org/#list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list">5.4.2. Consume a Syntax Definition</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string">
   <a href="https://infra.spec.whatwg.org/#string">https://infra.spec.whatwg.org/#string</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string">2.1. Determining the Registration</a>
    <li><a href="#ref-for-string①">5.4.2. Consume a Syntax Definition</a>
    <li><a href="#ref-for-string②">5.4.3. Consume a Syntax Component</a>
    <li><a href="#ref-for-string③">5.4.4. Consume a Data Type Name</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-strip-leading-and-trailing-ascii-whitespace">
   <a href="https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace">https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-strip-leading-and-trailing-ascii-whitespace">5.4.2. Consume a Syntax Definition</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-struct">
   <a href="https://infra.spec.whatwg.org/#struct">https://infra.spec.whatwg.org/#struct</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-struct">2.1. Determining the Registration</a>
    <li><a href="#ref-for-struct①">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-by-computed-value">
   <a href="https://drafts.csswg.org/web-animations-1/#by-computed-value">https://drafts.csswg.org/web-animations-1/#by-computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-by-computed-value">2.5. Animation Behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">4. Registering Custom Properties in JS</a> <a href="#ref-for-idl-DOMString①">(2)</a> <a href="#ref-for-idl-DOMString②">(3)</a>
    <li><a href="#ref-for-idl-DOMString③">4.2. The PropertyDefinition Dictionary</a> <a href="#ref-for-idl-DOMString④">(2)</a> <a href="#ref-for-idl-DOMString⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">6.2. The CSSPropertyRule Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidmodificationerror">
   <a href="https://heycam.github.io/webidl/#invalidmodificationerror">https://heycam.github.io/webidl/#invalidmodificationerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidmodificationerror">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-syntaxerror">
   <a href="https://heycam.github.io/webidl/#syntaxerror">https://heycam.github.io/webidl/#syntaxerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-syntaxerror">4.1. The registerProperty() Function</a> <a href="#ref-for-syntaxerror①">(2)</a> <a href="#ref-for-syntaxerror②">(3)</a> <a href="#ref-for-syntaxerror③">(4)</a> <a href="#ref-for-syntaxerror④">(5)</a> <a href="#ref-for-syntaxerror⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">4. Registering Custom Properties in JS</a>
    <li><a href="#ref-for-idl-boolean①">4.2. The PropertyDefinition Dictionary</a>
    <li><a href="#ref-for-idl-boolean②">6.2. The CSSPropertyRule Interface</a> <a href="#ref-for-idl-boolean③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-throw">
   <a href="https://heycam.github.io/webidl/#dfn-throw">https://heycam.github.io/webidl/#dfn-throw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-throw">4.1. The registerProperty() Function</a> <a href="#ref-for-dfn-throw①">(2)</a> <a href="#ref-for-dfn-throw②">(3)</a> <a href="#ref-for-dfn-throw③">(4)</a> <a href="#ref-for-dfn-throw④">(5)</a> <a href="#ref-for-dfn-throw⑤">(6)</a> <a href="#ref-for-dfn-throw⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-short">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-short">https://heycam.github.io/webidl/#idl-unsigned-short</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-short">6.1. Extensions to the CSSRule Interface</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cascade" style="color:initial">cascade</span>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
     <li><span class="dfn-paneled" id="term-for-valdef-all-inherit" style="color:initial">inherit</span>
     <li><span class="dfn-paneled" id="term-for-initial-value" style="color:initial">initial value</span>
     <li><span class="dfn-paneled" id="term-for-valdef-all-revert" style="color:initial">revert</span>
     <li><span class="dfn-paneled" id="term-for-specified-value" style="color:initial">specified value</span>
     <li><span class="dfn-paneled" id="term-for-valdef-all-unset" style="color:initial">unset</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valuea-def-color" style="color:initial">&lt;color></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-color-black" style="color:initial">black</span>
     <li><span class="dfn-paneled" id="term-for-valdef-color-blue" style="color:initial">blue</span>
     <li><span class="dfn-paneled" id="term-for-propdef-color" style="color:initial">color</span>
     <li><span class="dfn-paneled" id="term-for-valdef-color-red" style="color:initial">red</span>
     <li><span class="dfn-paneled" id="term-for-resolve-color-values" style="color:initial">resolving color values</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-conditional-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-at-ruledef-supports" style="color:initial">@supports</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font-size" style="color:initial">font-size</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-declaration-list" style="color:initial">&lt;declaration-list></span>
     <li><span class="dfn-paneled" id="term-for-typedef-declaration-value" style="color:initial">&lt;declaration-value></span>
     <li><span class="dfn-paneled" id="term-for-typedef-dimension-token" style="color:initial">&lt;dimension-token></span>
     <li><span class="dfn-paneled" id="term-for-consume-a-name" style="color:initial">consume a name</span>
     <li><span class="dfn-paneled" id="term-for-current-input-code-point" style="color:initial">current input code point</span>
     <li><span class="dfn-paneled" id="term-for-input-stream" style="color:initial">input stream</span>
     <li><span class="dfn-paneled" id="term-for-name-code-point" style="color:initial">name code point</span>
     <li><span class="dfn-paneled" id="term-for-name-start-code-point" style="color:initial">name-start code point</span>
     <li><span class="dfn-paneled" id="term-for-next-input-code-point" style="color:initial">next input code point</span>
     <li><span class="dfn-paneled" id="term-for-css-parse-something-according-to-a-css-grammar" style="color:initial">parse</span>
     <li><span class="dfn-paneled" id="term-for-reconsume-the-current-input-code-point" style="color:initial">reconsume the current input code point</span>
     <li><span class="dfn-paneled" id="term-for-check-if-three-code-points-would-start-an-identifier" style="color:initial">starts with an identifier</span>
     <li><span class="dfn-paneled" id="term-for-whitespace" style="color:initial">whitespace</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-transforms-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-transform-function" style="color:initial">&lt;transform-function></span>
     <li><span class="dfn-paneled" id="term-for-typedef-transform-list" style="color:initial">&lt;transform-list></span>
     <li><span class="dfn-paneled" id="term-for-propdef-transform" style="color:initial">transform</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-typed-om-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cssstylevalue" style="color:initial">CSSStyleValue</span>
     <li><span class="dfn-paneled" id="term-for-dom-cssstylevalue-associatedproperty-slot" style="color:initial">[[associatedProperty]]</span>
     <li><span class="dfn-paneled" id="term-for-custom-property-name-string" style="color:initial">custom property name string</span>
     <li><span class="dfn-paneled" id="term-for-reify-a-transform-function" style="color:initial">reify a &lt;transform-function></span>
     <li><span class="dfn-paneled" id="term-for-reify-a-transform-list" style="color:initial">reify a &lt;transform-list></span>
     <li><span class="dfn-paneled" id="term-for-reify-a-list-of-component-values" style="color:initial">reify a list of component values</span>
     <li><span class="dfn-paneled" id="term-for-reify-a-numeric-value" style="color:initial">reify a numeric value</span>
     <li><span class="dfn-paneled" id="term-for-reify-an-identifier" style="color:initial">reify an identifier</span>
     <li><span class="dfn-paneled" id="term-for-reify-as-a-cssstylevalue" style="color:initial">reify as a cssstylevalue</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-identifier-value" style="color:initial">&lt;custom-ident></span>
     <li><span class="dfn-paneled" id="term-for-typedef-length-percentage" style="color:initial">&lt;length-percentage></span>
     <li><span class="dfn-paneled" id="term-for-time-value" style="color:initial">&lt;time></span>
     <li><span class="dfn-paneled" id="term-for-funcdef-calc" style="color:initial">calc()</span>
     <li><span class="dfn-paneled" id="term-for-canonical-unit" style="color:initial">canonical unit</span>
     <li><span class="dfn-paneled" id="term-for-cap" style="color:initial">cap</span>
     <li><span class="dfn-paneled" id="term-for-ch" style="color:initial">ch</span>
     <li><span class="dfn-paneled" id="term-for-css-wide-keywords" style="color:initial">css-wide keywords</span>
     <li><span class="dfn-paneled" id="term-for-dimension" style="color:initial">dimension</span>
     <li><span class="dfn-paneled" id="term-for-em" style="color:initial">em</span>
     <li><span class="dfn-paneled" id="term-for-ex" style="color:initial">ex</span>
     <li><span class="dfn-paneled" id="term-for-ic" style="color:initial">ic</span>
     <li><span class="dfn-paneled" id="term-for-css-identifier" style="color:initial">identifier</span>
     <li><span class="dfn-paneled" id="term-for-interpolation" style="color:initial">interpolate</span>
     <li><span class="dfn-paneled" id="term-for-lh" style="color:initial">lh</span>
     <li><span class="dfn-paneled" id="term-for-math-function" style="color:initial">math function</span>
     <li><span class="dfn-paneled" id="term-for-rem" style="color:initial">rem</span>
     <li><span class="dfn-paneled" id="term-for-rlh" style="color:initial">rlh</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-variables]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-custom-property-name" style="color:initial">&lt;custom-property-name></span>
     <li><span class="dfn-paneled" id="term-for-custom-property" style="color:initial">custom property</span>
     <li><span class="dfn-paneled" id="term-for-invalid-at-computed-value-time" style="color:initial">invalid at computed-value time</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-var" style="color:initial">var()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-line-height" style="color:initial">line-height</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css3-images]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-image" style="color:initial">&lt;image></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css3-values]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-angle-value" style="color:initial">&lt;angle></span>
     <li><span class="dfn-paneled" id="term-for-integer-value" style="color:initial">&lt;integer></span>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
     <li><span class="dfn-paneled" id="term-for-number-value" style="color:initial">&lt;number></span>
     <li><span class="dfn-paneled" id="term-for-percentage-value" style="color:initial">&lt;percentage></span>
     <li><span class="dfn-paneled" id="term-for-resolution-value" style="color:initial">&lt;resolution></span>
     <li><span class="dfn-paneled" id="term-for-string-value" style="color:initial">&lt;string></span>
     <li><span class="dfn-paneled" id="term-for-url-value" style="color:initial">&lt;url></span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-namespacedef-css" style="color:initial">CSS</span>
     <li><span class="dfn-paneled" id="term-for-cssomstring" style="color:initial">CSSOMString</span>
     <li><span class="dfn-paneled" id="term-for-cssrule" style="color:initial">CSSRule</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-concept-shadow-tree" style="color:initial">shadow tree</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-document-window" style="color:initial">associated document</span>
     <li><span class="dfn-paneled" id="term-for-current-global-object" style="color:initial">current global object</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-set-append" style="color:initial">append <small>(for set)</small></span>
     <li><span class="dfn-paneled" id="term-for-ascii-case-insensitive" style="color:initial">ascii case-insensitive</span>
     <li><span class="dfn-paneled" id="term-for-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-code-point" style="color:initial">code point</span>
     <li><span class="dfn-paneled" id="term-for-map-exists" style="color:initial">contain <small>(for map)</small></span>
     <li><span class="dfn-paneled" id="term-for-string-length" style="color:initial">length</span>
     <li><span class="dfn-paneled" id="term-for-list" style="color:initial">list</span>
     <li><span class="dfn-paneled" id="term-for-string" style="color:initial">string</span>
     <li><span class="dfn-paneled" id="term-for-strip-leading-and-trailing-ascii-whitespace" style="color:initial">strip leading and trailing ascii whitespace</span>
     <li><span class="dfn-paneled" id="term-for-struct" style="color:initial">struct</span>
    </ul>
   <li>
    <a data-link-type="biblio">[web-animations-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-by-computed-value" style="color:initial">by computed value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-invalidmodificationerror" style="color:initial">InvalidModificationError</span>
     <li><span class="dfn-paneled" id="term-for-syntaxerror" style="color:initial">SyntaxError</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-dfn-throw" style="color:initial">throw</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-short" style="color:initial">unsigned short</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-color-3">[CSS-COLOR-3]
   <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/">CSS Color Module Level 3</a>. 19 June 2018. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-conditional-3">[CSS-CONDITIONAL-3]
   <dd>CSS Conditional Rules Module Level 3 URL: <a href="https://www.w3.org/TR/css3-conditional/">https://www.w3.org/TR/css3-conditional/</a>
   <dt id="biblio-css-fonts-3">[CSS-FONTS-3]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1]
   <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a>
   <dt id="biblio-css-typed-om-1">[CSS-TYPED-OM-1]
   <dd>Shane Stephens; Tab Atkins Jr.; Naina Raisinghani. <a href="https://www.w3.org/TR/css-typed-om-1/">CSS Typed OM Level 1</a>. 10 April 2018. WD. URL: <a href="https://www.w3.org/TR/css-typed-om-1/">https://www.w3.org/TR/css-typed-om-1/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-variables">[CSS-VARIABLES]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a>. 3 December 2015. CR. URL: <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3-images">[CSS3-IMAGES]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css3-images/">CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. CR. URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a>
   <dt id="biblio-css3-values">[CSS3-VALUES]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-cssom-1">[CSSOM-1]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-web-animations-1">[WEB-ANIMATIONS-1]
   <dd>Brian Birtles; et al. <a href="https://www.w3.org/TR/web-animations-1/">Web Animations</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/web-animations-1/">https://www.w3.org/TR/web-animations-1/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-layout-api-1">[CSS-LAYOUT-API-1]
   <dd>Greg Whitworth; et al. <a href="https://www.w3.org/TR/css-layout-api-1/">CSS Layout API Level 1</a>. 12 April 2018. WD. URL: <a href="https://www.w3.org/TR/css-layout-api-1/">https://www.w3.org/TR/css-layout-api-1/</a>
   <dt id="biblio-css-paint-api-1">[CSS-PAINT-API-1]
   <dd>Ian Kilpatrick; Dean Jackson. <a href="https://www.w3.org/TR/css-paint-api-1/">CSS Painting API Level 1</a>. 9 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-paint-api-1/">https://www.w3.org/TR/css-paint-api-1/</a>
   <dt id="biblio-css3-animations">[CSS3-ANIMATIONS]
   <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/css-animations-1/">CSS Animations Level 1</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-animations-1/">https://www.w3.org/TR/css-animations-1/</a>
   <dt id="biblio-css3-transitions">[CSS3-TRANSITIONS]
   <dd>David Baron; et al. <a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <p>No properties defined.</p>
  <h3 class="no-num no-ref heading settled" id="property-descriptor-table"><span class="content"><a class="css" data-link-type="at-rule" href="#at-ruledef-property" id="ref-for-at-ruledef-property③①">@property</a> Descriptors</span><a class="self-link" href="#property-descriptor-table"></a></h3>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-property-inherits" id="ref-for-descdef-property-inherits③">inherits</a>
      <td>true | false
      <td>n/a (see prose)
     <tr>
      <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-property-initial-value" id="ref-for-descdef-property-initial-value⑥">initial-value</a>
      <td>&lt;declaration-value>
      <td>the guaranteed-invalid value (but see prose)
     <tr>
      <th scope="row"><a class="css" data-link-type="descriptor" href="#descdef-property-syntax" id="ref-for-descdef-property-syntax⑤">syntax</a>
      <td>&lt;string>
      <td>n/a (see prose)
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="#dictdef-propertydefinition" id="ref-for-dictdef-propertydefinition④"><c- g>PropertyDefinition</c-></a> {
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="DOMString " href="#dom-propertydefinition-name" id="ref-for-dom-propertydefinition-name①"><c- g>name</c-></a>;
           <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;*&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-propertydefinition-syntax" id="ref-for-dom-propertydefinition-syntax①"><c- g>syntax</c-></a>       = "*";
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④"><c- b>boolean</c-></a>   <a class="idl-code" data-link-type="dict-member" data-type="boolean   " href="#dom-propertydefinition-inherits" id="ref-for-dom-propertydefinition-inherits①"><c- g>inherits</c-></a>;
           <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="DOMString " href="#dom-propertydefinition-initialvalue" id="ref-for-dom-propertydefinition-initialvalue②"><c- g>initialValue</c-></a>;
};

<c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css①"><c- g>CSS</c-></a> {
  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-css-registerproperty" id="ref-for-dom-css-registerproperty⑥①"><c- g>registerProperty</c-></a>(<a class="n" data-link-type="idl-name" href="#dictdef-propertydefinition" id="ref-for-dictdef-propertydefinition①①"><c- n>PropertyDefinition</c-></a> <a href="#dom-css-registerproperty-definition-definition"><code><c- g>definition</c-></code></a>);
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://drafts.csswg.org/cssom-1/#cssrule" id="ref-for-cssrule②①"><c- g>CSSRule</c-></a> {
    <c- b>const</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short①"><c- b>unsigned</c-> <c- b>short</c-></a> <a href="#dom-cssrule-property_rule"><code><c- g>PROPERTY_RULE</c-></code></a> = 18;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#csspropertyrule" id="ref-for-csspropertyrule①①"><c- g>CSSPropertyRule</c-></a> : <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssrule" id="ref-for-cssrule③①"><c- n>CSSRule</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring⑥"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-csspropertyrule-name" id="ref-for-dom-csspropertyrule-name①"><c- g>name</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring①①"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-csspropertyrule-syntax" id="ref-for-dom-csspropertyrule-syntax①"><c- g>syntax</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-csspropertyrule-inherits" id="ref-for-dom-csspropertyrule-inherits①"><c- g>inherits</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring②①"><c- n>CSSOMString</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString?" href="#dom-csspropertyrule-initialvalue" id="ref-for-dom-csspropertyrule-initialvalue①"><c- g>initialValue</c-></a>;
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> This will likely change in the future,
as the behavior of concept-defining at-rules in shadow trees
becomes more consistently defined. <a href="https://github.com/w3c/css-houdini-drafts/issues/939">&lt;https://github.com/w3c/css-houdini-drafts/issues/939></a><a href="#issue-14fa952d"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="registered-custom-property">
   <b><a href="#registered-custom-property">#registered-custom-property</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-registered-custom-property">2. Registered Custom Properties</a>
    <li><a href="#ref-for-registered-custom-property①">2.1. Determining the Registration</a> <a href="#ref-for-registered-custom-property②">(2)</a>
    <li><a href="#ref-for-registered-custom-property③">2.2. Parse-Time Behavior</a>
    <li><a href="#ref-for-registered-custom-property④">2.3. Specified Value-Time Behavior</a>
    <li><a href="#ref-for-registered-custom-property⑤">2.4. Computed Value-Time Behavior</a>
    <li><a href="#ref-for-registered-custom-property⑥">2.6. Conditional Rules</a> <a href="#ref-for-registered-custom-property⑦">(2)</a> <a href="#ref-for-registered-custom-property⑧">(3)</a>
    <li><a href="#ref-for-registered-custom-property⑨">2.7.2. Dependency Cycles via Relative Units</a>
    <li><a href="#ref-for-registered-custom-property①⓪">3. The @property Rule</a>
    <li><a href="#ref-for-registered-custom-property①①">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="custom-property-registration">
   <b><a href="#custom-property-registration">#custom-property-registration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-property-registration">2.4. Computed Value-Time Behavior</a> <a href="#ref-for-custom-property-registration①">(2)</a>
    <li><a href="#ref-for-custom-property-registration②">3. The @property Rule</a> <a href="#ref-for-custom-property-registration③">(2)</a>
    <li><a href="#ref-for-custom-property-registration④">3.1. The syntax Descriptor</a>
    <li><a href="#ref-for-custom-property-registration⑤">3.2. The inherits Descriptor</a>
    <li><a href="#ref-for-custom-property-registration⑥">3.3. The initial-value Descriptor</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="at-ruledef-property">
   <b><a href="#at-ruledef-property">#at-ruledef-property</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-ruledef-property">1. Introduction</a>
    <li><a href="#ref-for-at-ruledef-property①">2. Registered Custom Properties</a> <a href="#ref-for-at-ruledef-property②">(2)</a>
    <li><a href="#ref-for-at-ruledef-property③">2.1. Determining the Registration</a>
    <li><a href="#ref-for-at-ruledef-property④">3. The @property Rule</a> <a href="#ref-for-at-ruledef-property⑤">(2)</a> <a href="#ref-for-at-ruledef-property⑥">(3)</a> <a href="#ref-for-at-ruledef-property⑦">(4)</a> <a href="#ref-for-at-ruledef-property⑧">(5)</a> <a href="#ref-for-at-ruledef-property⑨">(6)</a> <a href="#ref-for-at-ruledef-property①⓪">(7)</a> <a href="#ref-for-at-ruledef-property①①">(8)</a> <a href="#ref-for-at-ruledef-property①②">(9)</a>
    <li><a href="#ref-for-at-ruledef-property①③">3.1. The syntax Descriptor</a> <a href="#ref-for-at-ruledef-property①④">(2)</a> <a href="#ref-for-at-ruledef-property①⑤">(3)</a> <a href="#ref-for-at-ruledef-property①⑥">(4)</a>
    <li><a href="#ref-for-at-ruledef-property①⑦">3.2. The inherits Descriptor</a> <a href="#ref-for-at-ruledef-property①⑧">(2)</a> <a href="#ref-for-at-ruledef-property①⑨">(3)</a> <a href="#ref-for-at-ruledef-property②⓪">(4)</a>
    <li><a href="#ref-for-at-ruledef-property②①">3.3. The initial-value Descriptor</a> <a href="#ref-for-at-ruledef-property②②">(2)</a> <a href="#ref-for-at-ruledef-property②③">(3)</a> <a href="#ref-for-at-ruledef-property②④">(4)</a>
    <li><a href="#ref-for-at-ruledef-property②⑤">6.2. The CSSPropertyRule Interface</a> <a href="#ref-for-at-ruledef-property②⑥">(2)</a> <a href="#ref-for-at-ruledef-property②⑦">(3)</a> <a href="#ref-for-at-ruledef-property②⑧">(4)</a> <a href="#ref-for-at-ruledef-property②⑨">(5)</a>
    <li><a href="#ref-for-at-ruledef-property③⓪">7.2. Example 2: Using @property to register a property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="descdef-property-syntax">
   <b><a href="#descdef-property-syntax">#descdef-property-syntax</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-property-syntax">3. The @property Rule</a>
    <li><a href="#ref-for-descdef-property-syntax①">3.1. The syntax Descriptor</a> <a href="#ref-for-descdef-property-syntax②">(2)</a>
    <li><a href="#ref-for-descdef-property-syntax③">3.3. The initial-value Descriptor</a> <a href="#ref-for-descdef-property-syntax④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="descdef-property-inherits">
   <b><a href="#descdef-property-inherits">#descdef-property-inherits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-property-inherits">3. The @property Rule</a>
    <li><a href="#ref-for-descdef-property-inherits①">3.2. The inherits Descriptor</a> <a href="#ref-for-descdef-property-inherits②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="descdef-property-initial-value">
   <b><a href="#descdef-property-initial-value">#descdef-property-initial-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descdef-property-initial-value">3. The @property Rule</a>
    <li><a href="#ref-for-descdef-property-initial-value①">3.3. The initial-value Descriptor</a> <a href="#ref-for-descdef-property-initial-value②">(2)</a> <a href="#ref-for-descdef-property-initial-value③">(3)</a> <a href="#ref-for-descdef-property-initial-value④">(4)</a> <a href="#ref-for-descdef-property-initial-value⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-window-registeredpropertyset-slot">
   <b><a href="#dom-window-registeredpropertyset-slot">#dom-window-registeredpropertyset-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-registeredpropertyset-slot">2. Registered Custom Properties</a>
    <li><a href="#ref-for-dom-window-registeredpropertyset-slot①">2.1. Determining the Registration</a>
    <li><a href="#ref-for-dom-window-registeredpropertyset-slot②">4.1. The registerProperty() Function</a>
    <li><a href="#ref-for-dom-window-registeredpropertyset-slot③">6. CSSOM</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-css-registerproperty">
   <b><a href="#dom-css-registerproperty">#dom-css-registerproperty</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-css-registerproperty">1. Introduction</a>
    <li><a href="#ref-for-dom-css-registerproperty①">2. Registered Custom Properties</a> <a href="#ref-for-dom-css-registerproperty②">(2)</a>
    <li><a href="#ref-for-dom-css-registerproperty③">3. The @property Rule</a> <a href="#ref-for-dom-css-registerproperty④">(2)</a>
    <li><a href="#ref-for-dom-css-registerproperty⑤">4. Registering Custom Properties in JS</a> <a href="#ref-for-dom-css-registerproperty⑥">(2)</a>
    <li><a href="#ref-for-dom-css-registerproperty⑦">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="register-a-custom-property">
   <b><a href="#register-a-custom-property">#register-a-custom-property</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-register-a-custom-property">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="computationally-independent">
   <b><a href="#computationally-independent">#computationally-independent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computationally-independent">3.3. The initial-value Descriptor</a>
    <li><a href="#ref-for-computationally-independent①">4.1. The registerProperty() Function</a> <a href="#ref-for-computationally-independent②">(2)</a> <a href="#ref-for-computationally-independent③">(3)</a> <a href="#ref-for-computationally-independent④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-propertydefinition">
   <b><a href="#dictdef-propertydefinition">#dictdef-propertydefinition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-propertydefinition">4. Registering Custom Properties in JS</a> <a href="#ref-for-dictdef-propertydefinition①">(2)</a>
    <li><a href="#ref-for-dictdef-propertydefinition②">4.2. The PropertyDefinition Dictionary</a> <a href="#ref-for-dictdef-propertydefinition③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-propertydefinition-name">
   <b><a href="#dom-propertydefinition-name">#dom-propertydefinition-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-propertydefinition-name">4. Registering Custom Properties in JS</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-propertydefinition-syntax">
   <b><a href="#dom-propertydefinition-syntax">#dom-propertydefinition-syntax</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-propertydefinition-syntax">4. Registering Custom Properties in JS</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-propertydefinition-inherits">
   <b><a href="#dom-propertydefinition-inherits">#dom-propertydefinition-inherits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-propertydefinition-inherits">4. Registering Custom Properties in JS</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-propertydefinition-initialvalue">
   <b><a href="#dom-propertydefinition-initialvalue">#dom-propertydefinition-initialvalue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-propertydefinition-initialvalue">4. Registering Custom Properties in JS</a>
    <li><a href="#ref-for-dom-propertydefinition-initialvalue①">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="syntax-string">
   <b><a href="#syntax-string">#syntax-string</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-syntax-string">2.1. Determining the Registration</a>
    <li><a href="#ref-for-syntax-string①">3.1. The syntax Descriptor</a>
    <li><a href="#ref-for-syntax-string②">5.3. The '|' Combinator</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="css-supported-syntax-component-name">
   <b><a href="#css-supported-syntax-component-name">#css-supported-syntax-component-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-supported-syntax-component-name">5.4.4. Consume a Data Type Name</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="data-type-name">
   <b><a href="#data-type-name">#data-type-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-data-type-name">5.4.1. Definitions</a> <a href="#ref-for-data-type-name①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pre-multiplied-data-type-name">
   <b><a href="#pre-multiplied-data-type-name">#pre-multiplied-data-type-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pre-multiplied-data-type-name">5.1. Supported Names</a>
    <li><a href="#ref-for-pre-multiplied-data-type-name①">5.2. The '+' and '#' Multipliers</a>
    <li><a href="#ref-for-pre-multiplied-data-type-name②">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="syntax-component">
   <b><a href="#syntax-component">#syntax-component</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-syntax-component">5. Syntax Strings</a>
    <li><a href="#ref-for-syntax-component①">5.1. Supported Names</a> <a href="#ref-for-syntax-component②">(2)</a>
    <li><a href="#ref-for-syntax-component③">5.3. The '|' Combinator</a> <a href="#ref-for-syntax-component④">(2)</a>
    <li><a href="#ref-for-syntax-component⑤">5.4.1. Definitions</a> <a href="#ref-for-syntax-component⑥">(2)</a>
    <li><a href="#ref-for-syntax-component⑦">5.4.2. Consume a Syntax Definition</a> <a href="#ref-for-syntax-component⑧">(2)</a>
    <li><a href="#ref-for-syntax-component⑨">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="syntax-component-name">
   <b><a href="#syntax-component-name">#syntax-component-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-syntax-component-name">5. Syntax Strings</a>
    <li><a href="#ref-for-syntax-component-name①">5.2. The '+' and '#' Multipliers</a> <a href="#ref-for-syntax-component-name②">(2)</a>
    <li><a href="#ref-for-syntax-component-name③">5.3. The '|' Combinator</a>
    <li><a href="#ref-for-syntax-component-name④">5.4.1. Definitions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="syntax-definition">
   <b><a href="#syntax-definition">#syntax-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-syntax-definition">2.7.1. Fallbacks In var() References</a>
    <li><a href="#ref-for-syntax-definition①">3.3. The initial-value Descriptor</a>
    <li><a href="#ref-for-syntax-definition②">4.1. The registerProperty() Function</a>
    <li><a href="#ref-for-syntax-definition③">5. Syntax Strings</a>
    <li><a href="#ref-for-syntax-definition④">5.3. The '|' Combinator</a> <a href="#ref-for-syntax-definition⑤">(2)</a>
    <li><a href="#ref-for-syntax-definition⑥">5.4.2. Consume a Syntax Definition</a>
    <li><a href="#ref-for-syntax-definition⑦">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="universal-syntax-definition">
   <b><a href="#universal-syntax-definition">#universal-syntax-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-universal-syntax-definition">2.4. Computed Value-Time Behavior</a>
    <li><a href="#ref-for-universal-syntax-definition①">3. The @property Rule</a>
    <li><a href="#ref-for-universal-syntax-definition②">3.3. The initial-value Descriptor</a> <a href="#ref-for-universal-syntax-definition③">(2)</a>
    <li><a href="#ref-for-universal-syntax-definition④">4.1. The registerProperty() Function</a> <a href="#ref-for-universal-syntax-definition⑤">(2)</a>
    <li><a href="#ref-for-universal-syntax-definition⑥">5. Syntax Strings</a>
    <li><a href="#ref-for-universal-syntax-definition⑦">5.1. Supported Names</a>
    <li><a href="#ref-for-universal-syntax-definition⑧">5.4.2. Consume a Syntax Definition</a> <a href="#ref-for-universal-syntax-definition⑨">(2)</a>
    <li><a href="#ref-for-universal-syntax-definition①⓪">6.3. CSSStyleValue Reification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="consume-a-syntax-definition">
   <b><a href="#consume-a-syntax-definition">#consume-a-syntax-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-consume-a-syntax-definition">3.1. The syntax Descriptor</a>
    <li><a href="#ref-for-consume-a-syntax-definition①">3.3. The initial-value Descriptor</a>
    <li><a href="#ref-for-consume-a-syntax-definition②">4.1. The registerProperty() Function</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="consume-a-syntax-component">
   <b><a href="#consume-a-syntax-component">#consume-a-syntax-component</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-consume-a-syntax-component">5.4.2. Consume a Syntax Definition</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="consume-a-data-type-name">
   <b><a href="#consume-a-data-type-name">#consume-a-data-type-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-consume-a-data-type-name">5.4.3. Consume a Syntax Component</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="csspropertyrule">
   <b><a href="#csspropertyrule">#csspropertyrule</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-csspropertyrule">6.2. The CSSPropertyRule Interface</a> <a href="#ref-for-csspropertyrule①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-csspropertyrule-name">
   <b><a href="#dom-csspropertyrule-name">#dom-csspropertyrule-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-csspropertyrule-name">6.2. The CSSPropertyRule Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-csspropertyrule-syntax">
   <b><a href="#dom-csspropertyrule-syntax">#dom-csspropertyrule-syntax</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-csspropertyrule-syntax">6.2. The CSSPropertyRule Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-csspropertyrule-inherits">
   <b><a href="#dom-csspropertyrule-inherits">#dom-csspropertyrule-inherits</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-csspropertyrule-inherits">6.2. The CSSPropertyRule Interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-csspropertyrule-initialvalue">
   <b><a href="#dom-csspropertyrule-initialvalue">#dom-csspropertyrule-initialvalue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-csspropertyrule-initialvalue">6.2. The CSSPropertyRule Interface</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>